DHTMLX Touch documentation

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:[ // as accordion inherits from layout we must specify it only after parameters rows(cols)
					{ 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
								header_alt:"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",
								header_alt:"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",
											header_alt:"21 (closed)",
											body:"left"
										},
										{ 	
											header:false,
											header_alt:"22 (closed)",
											body:"center"
										},
										{ 	
											header:"panel 23",
											header_alt:"23 (closed)",
											body:"right"
										}
									]
								}
							},
							{ // the third pane of the accordion
								header:"panel 3",
								header_alt:"3 (closed)",
								body:"lower"
							}
					]}
				]
			});
		</script> 
	</body> 
</html>