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.
To add an accordion to a layout, insert an Accordion cell.
| 1. Select where to insert the accordion | 2. Select the Accordion cell |
|---|---|
 |
 |
After you insert the cell, you will get an Accordion cell, with a single panel in it.
- 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 |
|---|---|
 |
 |