An accordion is a vertical list of panels, each time showing one panel expanded and the others collapsed. Panels can include text, media and grids of cells.

Demo Of Toolset Layouts Accordion Feature

To add an accordion to a layout, insert an Accordion cell.

1. Select where to insert the accordion 2. Select the Accordion cell
Select where to insert the accordion Select the Accordion cell

After you insert the cell, you will get an Accordion cell, with a single panel in it.

An Accordion cell, without any content yet
An Accordion cell, without any content yet
  • To change the title of a panel, click on its name (where it says “Panel 1”).
  • To add content into the panel, insert a cell inside it. You can insert a grid cell to display more than one cell in the panel.
  • To add more panels, click on the + button at the bottom of the accordion cell.
  • To add a custom CSS class to the panel, click the “pen” icon in the panel’s top right corner.

On the front-end, panels appear one below the other. When clicking on a panel, it expands and all other panels collapse.

Accordion in the Layouts editor Accordion on the front-end
Accordion in the Layouts editor Accordion on the front-end