< DHTMLX Suite 8.3: Colorpicker Transparency Scale, Extended Functionality of Columns’ Header and Footer in Grid/TreeGrid, and More


Easy-to-Use JavaScript Accordion

JavaScript Accordion

dhtmlxAccordion is a part of dhtmlxSuite 5, which is under maintenance now.

Product Features

  • Cross-browser (IE, FF, Opera, Safari, Chrome)
  • Space-saving way to organize content
  • Auto-resizing capabilities
  • Common DHTMLX container functionality
  • Ability to open several panels independently (multi mode)
  • Easy detaching of objects
  • Destructor for better memory usage
  • Easy integration with other DHTMLX components
  • 4 predefined skins
  • Undockable items

Live Demo

Space-saving way to organize content
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).

If you'd like to evaluate or purchase dhtmlxSuite 5, please contact us

Support & Learning Resources

Technical samples

All Accordion features are accompanied by an online sample

Ticket support

Create a support request and get fast and qualified help from our support/development team.


Our detailed documentation can learn how to use Accordion and effectively implement it in your own applications. It provides the detailed information regarding each aspect of the widget.

Community forum

If you don't have an active support subscription, you are welcome to post your technical questions to our forum. It's moderated by our official support team.