The tabbox component provides a folder like container for other ZK components. The tabbox comes with various molds (look and feel) such as the accordion mold.

<tabbox id="tb" width="100%" height="380px" mold="accordion">
	<tabs>
		<tab label="Tab 1" />
		<tab label="Tab 2" />
		<tab label="Tab 3" />
	</tabs>
	<tabpanels>
		<tabpanel>
			<grid id="grid" mold="paging" pageSize="4">
		        <columns>
		            <column hflex="1" label="Order #" align="left" />
		            <column hflex="2" label="Item Purchased" align="center" />
		            <column hflex="3" label="Purchased Time" align="center" />
		            <column hflex="1" label="Paid" align="right" />
		        </columns>
		        <rows>
		            <zscript><![CDATA[
						import org.zkoss.zul.*; 
						int[] orderArray = new int[12];
						for (int j=0; j<12; j++){
							orderArray[j]= 390 + j;
						}
		            ]]></zscript>
		            <row forEach="${orderArray}">
		                <label value="${each}" />
		                <listbox mold="select" >
		                    <listitem label="Java" />
		                    <listitem label="Latte" />
		                    <listitem label="Mocha" />
		                </listbox>
		                <timebox cols="12" format="a hh:mm:ss" mold="rounded" 
		                	onCreate="self.value = new Date()" />
		                <checkbox label="No" onCheck='self.label= self.isChecked()? "Yes" : "No"' />
		            </row>
		        </rows>
		    </grid>
		</tabpanel>
		<tabpanel>
			<include src="/widgets/tabbox/accordion/auxhead1.zul" />
		</tabpanel>
		<tabpanel>
			<include src="/widgets/tabbox/accordion/auxhead2.zul" />
		</tabpanel>
	</tabpanels>
</tabbox>