Accordion is a component that presents a collection of multiply panes placed vertically or horizontally (each pane consists of the header and body). The main difference from standard 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", headerAlt:"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:
The default mode (if you don't specify multi parameter) unites the features of both modes:
1. All the pans can be expanded at the same time.
2. You can't collapse all the pans at the same time - some pan will be always expanded.
dhx.ui({ cols:[{ view:"accordion", type:"wide", multi:false, rows:[{ header:"Catalog", headerAlt:false, body:"#books#" }] }] })
Expanded | Collapsed | Code | Hide header | Constant header | |
---|---|---|---|---|---|
Vertical | ![]() | ![]() | {view:"accordion", type:"wide", rows:[ {header:"header", headerAlt:"headerAlt", body:"body" }] } | ![]() | ![]() |
Horizontal | ![]() | ![]() | {view:"accordion", type:"wide", cols:[ {header:"header", headerAlt:"headerAlt", body:"body" }] } |
To use ui functionality, touchui.css and touchui.js files must be included.