The accordion element allows you to place content inside a closed panel. By clicking the headline of the panel, it will expand and close any other expanded panels.

You can add an unlimited number of accordion elements on a page.

Contao offers two types of accordion elements:

Accordion single element

This panel is build with only one element. You enter the section headline that is used as the expanding link. The content of the section is entered in a richt text field similar to text field in text elements.

You even have the possibility to add an image to the content.

Accordion wrapper start & end

The second type of accordion is the combination of a wrapper start and stop element. 

All elements added between start and stop build the content of the accordion panel.

Javascript Accordion

To use this type of accordion element on your page, you have to enable either jQuery or Mootools and add the j_accordion or moo_accordion template to your page layout.