Настройка элементов Accordion

Компонент "accordionitem" - это обязательная часть виджета Accordion. Accordionitem наследуется от view.

Любой элемент аккордеона должен содержать два свойства header для хедера и body для основного содержимого (текст, HTML или любой компонент).

webix.ui({
     rows:[ // или cols
        {
            view:"accordionitem",
            header:"Pane 1",
            headerHeight:20,
            headerAlt:"Pane 2 Closed",
            body:{ view:"form", ...} // ui компонента
        },
        {
            view:"accordionitem",
            header:"Pane 2",
            headerAlt:"Pane 2 Closed",
            body:"This is Pane 2 body", // текст
            collapsed: true
        }
     ]
})

{
    header:"Pane 1",
    body:{ view:"form", ... } // компонент ui
}

Комментарии:

• header - определяет заголовок панели в развернутом состоянии;
• headerAlt - определяет заголовок панели в свернутом состоянии;
• headerHeight / headerAltHeight - определяет высоту заголовка панели в развернутом/свернутом состоянии;
• collapsed (false или true) - определяет какая панель будет развернута/свернута при загрузке приложения.

Вот как можно инициализировать простой accordion:

webix.ui({
    view:"accordion",
    rows:[
        {
            view:"accordionitem", // необязательно указывать
            header:"Pane",
            body:"Pane 1"
        },
        {
            header:"Pane",
            body:"Pane 1"
        },
        { ... }
    ]
});

Related sample:  Accordionitem

Элементы Accordion могут быть свернуты и развернуты с помощью соответствующих методов:

$$('item1').collapse();
$$('item1').expand();
// не забудьте указать ID элементов!