NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

JavaScript Accordion UI widget

The Accordion widget allows you to place multiple panels with content in a space-saving manner. With JavaScript Accordion, you can hide areas of information and activate them with a click. As a result, users will see only the panels they currently need.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Support of All Modern browsers
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Collapsible panels

The panels of this JavaScript accordion control can be easily expanded and collapsed by clicking on its header, leaving only the info that you need on the web page at the moment.

Manipulating content visibility

The behavior of Accordion panels can be adjusted to your needs to show some content and hide another. By default only one panel can be visible while the others are collapsed. You can change this mode and make all the panels collapsed or expanded at a time. What is more, you can mix the two described modes to get a combined variant.

Container for other widgets

You can put various Webix widgets into Accordion panels to save a significant amount of space on your webpage.

Vertical/Horizontal arrangement

The columns and rows of the Accordion control can be easily organized vertically or horizontally, allowing you to adjust the widget to the existing web-site design.