Use splitters in box, vbox, and hbox to divide a box's children components with a bar separator. When the splitter's handle is dragged, the splitter's sibling elements are resized. Splitters can also set to be collapsable.

<zk>
	<panel title="Splitter" border="normal" width="500px" >
		<panelchildren>
			<hbox spacing="0" width="100%" height="100%">
				<vbox spacing="0" width="100%">
					<cell height="130px">
					Column 1-1: The left-top box. To know whether a splitter
					is collapsed, you can listen to the onOpen event.
					</cell>
					<splitter id="s1" collapse="before"/>
					<cell height="130px">
					Column 1-2: You can enforce to open or collapse programming
					by calling setOpen method.
					</cell>
				</vbox>
				<splitter id="s2" collapse="before"/>
				Column 2: Whether a splitter allows users to open or collapse
				depending on the collapse attribute.
			</hbox>
		</panelchildren>
	</panel>
</zk>