Accordion consists of panes arranged into layout rows and cols. Each pane, or accordion item, features body and header and can be fully expanded and collapsed by clicking its header. You can place text or any component into each pane. The component inherits from layout.
Accordion with three panes
webix.ui({
view:"accordion",
multi:true,
cols:[ //or rows
{ header:"col 1", body:"content 1" },
{ header:"col 2", body:"content 2" },
{ header:"col 3", body:"content 3" }
]
});
Related sample: Complex Accordion
Related sample: Horizontal Accordion
Note that view name can be omitted (view:"accordion"). If you place an array of objects with body and header into row or column - the view will be automatically recognized as accordion.
webix.ui({
cols:[ //or rows
{ header:"col 1", body:"content 1" },
{ header:"col 2", body:"content 2" }
]
});
Related sample: Layout with Headers
Accordions differ by their possibility to show and hide panes at the same time. There's a special multi parameter to set the necessary mode.