<!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>