toujou
+49 911 23980-870

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.

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’. 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.