Accordion is a component that presents collection of multiply panes placed vertically or horizontally (each pane consists of the header and body). The main difference from standart layout is that it can be collapsed, expanded by clicking on the header. Ui-related accordion inherits from layout.
To init the component you need to perform a simple procedure - call initialization code.
Initialization code or an object constructor gives you a choice: you can create an object directly or by using common declaration.
dhx.ui.accordion({...})// direct declaration //or dhx.ui ({...})//common declaration
Whatever variant of initialization you choose it will include some of the following parameters:
Please note, accordion is a derived class, i.e. it inherits all the features of the base classes (accordion → layout → View).
dhx.ui({ view:"accordion", cols:[{ header:"panel 1", header_alt:"panel 1 (closed)", body:"upper" }] });
Brief information about 'id' (this parameter accordion inherits from the base class 'view').
You can set 'id' both for the whole accordion and for any of the pans.
UI-related accordion has 2 modes:
dhx.ui({ cols:[{ view:"accordion", type:"wide", multi:false, rows:[{ header:"Catalog", header_alt:false, body:"#books#" }] }] })
Expanded | Collapsed | Code | Hide header | Constant header | |
---|---|---|---|---|---|
Vertical | ![]() | ![]() | {view:"accordion", type:"wide", rows:[ {header:"header", header_alt:"header_alt", body:"body" }] } | ![]() | ![]() |
Horizontal | ![]() | ![]() | {view:"accordion", type:"wide", cols:[ {header:"header", header_alt:"header_alt", body:"body" }] } |
To use ui functionality, touchui.css and touchui.js files must be included.