Live Demo

dhtmlxAccordion allows you to organize your web content in a space-saving way. This
JavaScript accordion widget displays multiple panels within a container. Just one of these
panels is expanded at a time, while others are collapsed. To see the other panels' contents, the
user clicks on the appropriate header, and the chosen panel will open smoothly. This popular
visual element is built entirely in JavaScript and works correctly in all major web browsers (FF,
IE, Opera, Safari, Chrome).

Easy-to-use and highly customizable control

The content displayed in the panels can include any object, URL, or other DHTMLX component,
such as Tree, Grid, DataView,
etc. dhtmlxAccordion is light-weight and easy to use and comes with 4 predefined skins including modern Material Design. It offers an efficient JavaScript solution for displaying diverse content
within expandable panels.

Multi mode, drag-and-drop and more features

You can also use dhtmlxAccordion in a multi mode, when each panel is displayed independently
and can be expanded/collapsed without affecting the others. The end user can also rearrange
the panels with simple drag-and-drop actions.

Integration with other DHTMLX components

dhtmlxAccordion integrates easily with other components in the DHTMLX product line. It can be
easily integrated into an app built with dhtmlxLayout. You can also put other DHTMLX
components into the accordion panels with just a single script command. Any item in
dhtmlxAccordion can be undocked - extracted from the single layout in order to be displayed
separately (in a window of the dhtmlxWindows system).

Editions and Licenses

dhtmlxAccordion is available in Standard Edition only.

You can use dhtmlxAccordion for free under GNU General Public License v2, or Free License that allows you to use the component in a non-GPL application/website.