Playing the Accordion

Hi everybody! I’m lucky to inform you that summertime is approaching rapidly and it’s high time to rejoice, indulge into various kinds of outdoor activities, twist and shout. Today I suggest you to combine all these things with web development. So, are you ready to play the Accordion? 😉

Still, I don’t want you to read musical notes. In HTML and Javascript accordion means a UI control that consists of panels that can be expanded and collapsed (just like the bellows of a musical accordion) to make the whole interface sound.

Webix accordion widget is one of the basic ui layout types. It seems to be very simple and non-configurable, but one needs to learn and practice to play the music. Here we gathered three common use cases and customization samples with the Accordion component:

Accordion with extra controls on panels;

Dynamic Accordion layout;

Smooth Accordion menu.

Adding controls to panels of Accordion widget

Lots of users have asked us a question “How can I make the headers of my Accordion items interactive?” The headers look very much like the Toolbar and tempt one to fill them with buttons and icons, but the truth lies apart.

Indeed, you can embed interactive buttons and icons into the panels of accordion items, but only via HTML and CSS:

Looks like a nightmare, especially when thinking about catching clicks, eh? But don’t judge too strictly as Webix offers convenient API for such cases. You can define CSS-specific click handlers with the help of the onClick property:

As you can see, here we have three sections made of Accordion items each of which houses a list of sub-items. Once a menu item is selected, the related multiview shows up.

For convenience’ sake we have created a custom accordion-menu widget that inherits from Accordion and adds extra functionality, namely:

Creates a set of selectable Webix lists and calls the onMenuSelect event each time an item is selected in either of these lists.

Removes selection, if any, from currently inactive lists.

Accordion animation and styling are added through CSS.

You can check the full code of a custom view as well as live demo by the link.

Now, when we have broadened our horizons together, you can create your own Accordion example. Just revise the basics browsing Accordion samples, read the documentation and start playing the API to elicit the right melody.