Documentation

Accordionitem

Accordionitem inherits from view and is an integral part of the ui-related accordion component. You need at least two accordionitems to make a workable accordion.

Any accordionitem must have two properties: header for heading and body for 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 ",
            headerAlt:"Pane 2 Closed",
            body:"This is Pane 2 body", //just text
            collapsed: true
        }]
})

Comments:

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

If you initialize accordion like below, you can omit accordioitem initilization:

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

Related sample:  Accordionitem

Accordionitems can be collapsed and expanded prograsmmatically with the help of dedicated methods:

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

If the items of your accordion are arranged in cols, their headers are collapsed to vertical panels as you close an accordionitem.

Back to top