Accordion Item Configuration

The "accordionitem" view inherits from view and is an integral part of the UI-related Accordion component. You need at least two Accordion items to make a workable Accordion.

Any Accordion item must have two properties: header for heading and body for the main text or some UI component.

webix.ui({ 
     rows:[ // or cols
        {
            view:"accordionitem",
            header:"Pane 1",
            headerHeight:20, 
            headerAlt:"Pane 2 Closed", 
            body:{ view:"form", ...} //ui component
        },
        { 
            view:"accordionitem",
            header:"Pane 2",
            headerAlt:"Pane 2 Closed",
            body:"This is Pane 2 body", //just text
            collapsed: true
        }
     ]
})

{
    header:"Pane 1",
    body:{ view:"form", ... } //ui component
}

Comments:

• header - defines text heading for a panel in the expanded state;
• headerAlt - defines text heading for a panel in the collapsed state;
• headerHeight / headerAltHeight - defines the height of a panel in the expanded/collapsed state;
• collapsed (false or true) - defines the panel that will be expanded/collapsed on the app's loading.

You do not need to state the view type as view:"accordionitem" to initialize an accordion panel:

webix.ui({
    view:"accordion",
    rows:[
        {
            view:"accordionitem", // optional
            header:"Pane",
            body:"Pane 1"
        },
        {
            header:"Pane",
            body:"Pane 1"
        },
        { ... }
    ]
});

Related sample:  Accordionitem

Accordion items can be collapsed and expanded with the help of dedicated methods:

$$('item1').collapse();
$$('item1').expand();
//don't forget to specify IDs to accordionitems!