Regional University Computing Center Kaiserslautern-Landau

Accordion

For what content is the accordion suitable?

Use the accordion e.g. for FAQ articles or to enrich the main content with secondary but useful additional information.

Avoid "hiding" essential content of a page in an accordion and make sure that the title is clear so that it is clear what is "hidden" behind it.

instruction

  1. First of all, a content element "Accordion" must be created at the appropriate place, which is located under the Interactive tab.
Example element from the Typo3 backend: The illustration shows the content elements located under the Interactive tab. The Accordion is located in the upper left position.
Example element from Typo3 backend: content element chordion

2. After that, a heading must be assigned and under "Accordion-Item" click on Create new.
3. Now you can add the header and the text.

Each accordion item can be expanded later with a mouse click. The assigned header is always displayed, while the text only appears when it is expanded.

Example element from the Typo3 backend: The figure shows how items are added to the accordion. After the creation of items at the top, the header assignment follows. Below this, a text is inserted.
Example element from the Typo3 backend: populating the Accordion with content

Beispiel

Example element from the frontend: You can see an accordion consisting of three parts. The first part is unfolded so that the texts hidden behind it can be seen.
Example element from the frontend: accordion

You are in the self-study and want to go to the training start page, then click on TYPO3 in the self-study for beginners part 2.

 

You are currently in self-training, then click  Exercise - Accordeon to continue.