Accordion elements
Display text blocks in the form of lists.
Item-IDs: 01-019 | 01-020 | 01-021
Sample views Step by step guide Screen adaptation Pieces of advice
Sample views
Regular Accordion - Title: with subtitle as list
List element 1List element 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Title: Text with image, no subtitle
Title: with subtitle
Title: with subtitle as list
List element 1List element 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Title: Text with image, no subtitle
Title: with subtitle
Subtitle
I am an accordion with text right
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Step by step guide
Create accordion
- Click on the + Content button to create any accordion element.
- In the Text Elements tab, select the element of your choice.
Titles & text blocks in the accordion
- To create a text block with a title and, if necessary, subtitles, click + Create new in the General tab.
- Fill in the Title, Subtitle, or Subtitle as List fields and the Description text as needed.
- If necessary, add an image (Images: Add file).
More records
- For further texts, click on + Create new again.
- You can subsequently change the order of the text blocks using the arrow keys on the right-hand side.
Schema.org markup
- For more success in SEO you can send the Schema.org markup for FAQs to Google.
- To do so, click the box in the area Enable schema.org markup rendering so that a green checkmark appears.
Choose your expanded items
- You can choose how many elements are being displayed with the corresponding answers at once by choosing the option in the drop-down menu under Expanded Items.
- Your choices are: none, the first, or all created responses when viewing a page. By default, the first element is displayed.
Single expand mode
- Activate the option of closing one accordion element automatically when another is clicked by clicking on the slider in the Single Expand Mode area.
- In toujou the default is the off option.
Create text
- For an adjacent text block, you click on the tab Text.
- If you copy the text from another file, pay attention to possibly copied formatting.
- The text can be formatted directly in the text box, with the menu above the text box.
- Save your settings.
Screen adaptation
Accordion elements display the content you inserted in the form of a list of text blocks. The text block of the first title is always visible; all other titles, which are always displayed from top to bottom, and text blocks can be opened and closed by clicking on the right-aligned arrows.
Worth noting: Text and images are always as wide as their title and, depending on the design, behave like a plain text element or a text with an image in the text.
Responsive behaviour: Up to a certain screen size, images are displayed in a fixed relation to the text. If there is not enough space, images above the text are displayed at full width.
Pieces of advice for using accordion elements for texts:
The accordion element is a common form of presenting information like ‘Frequently Asked Questions’. Particularly interesting for SEOs: By activating the Schema.org markup (in the general tab), you support your search engine optimization for FAQs by means of structured data.
In general, it is suitable for the collection of diverse content, which individually may not need the creation of its own sub-page; but the content may be too long in regular text form.
An accordion display offers the opportunity to collect topics in a space-saving manner: in ‘small’ text blocks and with a title for categorization. However, we advise editors to make good use of the accordion element because hidden content will not be found by a keyword search. This only works if you have your keywords and subtitles well tagged. If the text blocks are longer than a few lines in length, you should think about creating a content page for the topic to ensure visitors can find the information.