Usage Example of Accordion

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html> 
	<head> 
		<link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css" media="screen" charset="utf-8"> 
		<script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script> 
	</head> 
	<body> 
		<script type="text/javascript" charset="utf-8"> 
                    dhx.ui({// specifies a view
			    type:"wide", // specifies a subtype of the border
				cols:[ // in the first column we  specify accordion
					{ view:"accordion",
						type:"wide",
						rows:[ // in such way we specify vertical accordion
							{ // the first pane of the accordion	
								header:"panel 1", // the header text in expanded state
								headerAlt:"1 (closed)", // the header text in collapsed state
								body:"upper" //content of the pane's body
							},
							{ // the second pane of the accordion
								header:"panel 2",
								headerAlt:"2 (closed)",
								body:{ // in body of the second pane we create one more accordion
									view:"accordion",
									cols:[// in such way we specify horizontal accordion
										{ 	
											header:"panel 21",
											headerAlt:"21 (closed)",
											body:"left"
										},
										{ 	
											header:false,
											headerAlt:"22 (closed)",
											body:"center"
										},
										{ 	
											header:"panel 23",
											headerAlt:"23 (closed)",
											body:"right"
										}
									]
								}
							},
							{ // the third pane of the accordion
								header:"panel 3",
								headerAlt:"3 (closed)",
								body:"lower"
							}
					]}
				]
			});
		</script> 
	</body> 
</html>