Accordion

The accordion is an expandable and collapsible way of displaying content elements. Multiple content sections can be presented on a single page in a space-saving manner, allowing users to expand only the sections that are relevant to them.

How it works

Any content element can be converted into an accordion display. The element’s heading is shown as the accordion title and remains visible at all times. The associated content can be expanded or collapsed, allowing users to show or hide information as needed.

Enabling an accordion – step by step

1. Open the content element that you want to display as an accordion.
2. Switch to the “Appearance” tab.
3. Under “Frame”, select the “Accordion” option.
4. Make sure the “Heading” field is filled in (required for accordion display).
5. Click “Save”.

Supported content element types

The accordion works with almost all content element types that include a heading field:

Supported	Not Supported
Text & Media	Insert Records
Heading	Divider
Table	Elements with the “Hide” type
File Links
Menu

Heading as the accordion title

Required field: The accordion requires an entry in the “Heading” field. This text is displayed as the accordion title and remains visible at all times.

The selected heading type (H2, H3, etc.) does not affect the appearance of the accordion title. In accordion mode, the title’s font size and styling are predefined and displayed consistently regardless of the heading level.

Multiple accordions on one page

Simply create multiple content elements with the “Accordion” frame option and place them directly one below the other. TYPO3 automatically groups them into a single accordion block, creating a consistent and space-efficient presentation of related content.

Accordions in a two-column layout

Accordions can also be displayed within a two-column layout:

1. Set up a multi-column content section.
2. For each content element that should appear as an accordion, select the “Accordion” frame option.