Regional University Computing Center Kaiserslautern-Landau

Content element "Accordion"

Instructions with exercise

About the content element

The accordion is a control element that displays content in expanded form as soon as the page visitor clicks on it.

  • The clickable content headings are arranged one below the other like a list.
  • If a heading is clicked, the content of the accordion element expands.
  • If a second heading is clicked, this content expands and the first accordion element closes again.
  • The accordion element should only contain text.

Use:

  • For structured detailed information that
    • would make the website confusing and
    • which is not extensive enough for a separate website.
  • The content is not essential for the website and may be overlooked
This is what it looks like

Live view of the content item

Detailed information that

  • would make the website confusing and
  • which are not extensive enough for a separate website,

can be well accommodated in accordions.

Note: This accordion element contains little information that is so important that it is easier to read without interaction. This is why it is also repeated in the text above.

The accordion is used to place extensive detailed information on a page, which is not worthwhile for a single page, without overloading it. Images, on the other hand, attract the attention of the page visitor and lose this function in an accordion.

Our experience shows that editors tend to "tidy up" their cluttered websites with an accordion and hide essential information on the website. In doing so, they overlook the fact that an accordion "costs" a site visitor interaction, especially if all the information in the accordion is actually relevant. The probability that a site visitor will leave a page because it costs too much interaction and therefore assume that the information they are looking for is not on the page is relatively high.

As accordions also have other disadvantages, we have decided to no longer allow images in the accordion. If detailed information needs to be enriched with images, it can probably be placed on a separate page.

Note: This time the information in the accordion is detailed and clarifies a frequently asked question. However, the general information about the accordion would overload it. This is a good example of an accordion.

Step by step

Illustrated instructions

Step 1:

First, a content element"Accordion" must be created in the appropriate place, which is located under the Interactive tab.

Step 2 and 3:

2. then assign a heading and click on Create new under"Accordion item".
3. the header and the text can now be added.

TYPO3 self-study

Exercise

  1. Create a content element "Accordion".
  2. Give the accordion the heading "FAQ"
  3. Create two accordion elements. Fill them with text from the dummy text generator.
  4. Display the result in the frontend.

Mental work

Look at one of your pages (or any page) with a relatively large amount of information:

  • Do you see information that definitely needs to be captured?
  • Is there any information that might be too detailed for some site visitors?
  • Could this information be overlooked?
  • Think roughly about how you would restructure the page. Can accordions improve the overview here?
To the sandbox

Let's continue

To the overviewNext topic