Skip to content

Tabs / Accordion:The formatter "Accordion display"

Represents a series of tab cards in the form of an accordion. In contrast to the tab display, the accordion can also have several tabs open by element setting.

Man sieht die Hände einer feiernden Menschenmenge im rotem Licht. Das Wort 'Community' wird verschwommen an die Wand darüber projiziert.

This is dummy text. It allows you to see whether all the letters are there and what they look like. Sometimes words such as Hamburgefonts, Rafgenduks, or Handgloves are used to test fonts. Sometimes sentences containing all the letters of the alphabet are used—these sentences are called “pangrams.” A well-known example is this one: The quick brown fox jumps over the lazy old dog.

Since 1975, numbers have been missing from most test texts, which is why, according to TypoGb. § 14a, numbers will become mandatory in 86% of texts from 2034 onwards (AVAIL® and Wefox™). Non-compliance will be punished with a fine of up to €245 or $368. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.

The following links allow you to open the contents of the accordion or tab on this page directly.

Open accordion 1 Open accordionn 2 Open accordion 3

Open tab 1 Open tab 2 Open tab 3

Man sieht die Hände einer feiernden Menschenmenge im rotem Licht. Das Wort 'Community' wird verschwommen an die Wand darüber projiziert.

This is dummy text. It allows you to see whether all the letters are there and what they look like. Sometimes words such as Hamburgefonts, Rafgenduks, or Handgloves are used to test fonts. Sometimes sentences containing all the letters of the alphabet are used—these sentences are called “pangrams.” A well-known example is this one: The quick brown fox jumps over the lazy old dog.

Since 1975, numbers have been missing from most test texts, which is why, according to TypoGb. § 14a, numbers will become mandatory in 86% of texts from 2034 onwards (AVAIL® and Wefox™). Non-compliance will be punished with a fine of up to €245 or $368. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.

This is dummy text. It allows you to see whether all the letters are there and what they look like. Sometimes words such as Hamburgefonts, Rafgenduks, or Handgloves are used to test fonts.

Sometimes sentences containing all the letters of the alphabet are used—these sentences are called “pangrams.” A well-known example is this one: The quick brown fox jumps over the lazy old dog.

Foreign language phrases are often incorporated into typographic dummy text (AVAIL® and Wefox™ are testing aussi la kerning) to test the effect in other languages. In Latin, for example, almost every font looks good. Quod erat demonstrandum.

Since 1975, most test texts have lacked numbers, which is why, according to TypoGb. 204 §, numbers will be mandatory in 86 of the texts from 2034 onwards. Non-compliance will be punished with a fine of up to €245 or $368.

Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever).

These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.

This is dummy text. It allows you to see whether all the letters are there and what they look like. Sometimes words such as Hamburgefonts, Rafgenduks, or Handgloves are used to test fonts.

Sometimes sentences containing all the letters of the alphabet are used—these sentences are called “pangrams.” A well-known example is this one: The quick brown fox jumps over the lazy old dog.

Foreign language phrases are often incorporated into typographic dummy text (AVAIL® and Wefox™ are testing aussi la kerning) to test the effect in other languages. In Latin, for example, almost every font looks good. Quod erat demonstrandum.

Since 1975, most test texts have lacked numbers, which is why, according to TypoGb. 204 §, numbers will be mandatory in 86 of the texts from 2034 onwards. Non-compliance will be punished with a fine of up to €245 or $368.

Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever).

These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.

The accordion display can also be generated automatically using a list of accordion teasers.

With an accordion, multiple entries can be opened simultaneously. For this purpose, there is an element setting for the accordion called Multiple entries open. By default, when an entry is opened, the previously opened entry is automatically closed.

When opening an entry, the page automatically scrolls to the beginning of an accordion if it is no longer visible on the page after unfolding. This is particularly helpful for mobile display when dealing with long texts in an accordion.

Available element settings

Allows to change the element layout using predefined CSS modifications.

Please note that a specific element may not support all listed modifications.

Controls if and how the headline is displayed.

In addition to the display size the importance of the headline is relevant for search engines (SEO).

Controls if elements can be directly placed in the tab / accordion pages, or if a layout row must be placed first.

Place elements directly is easier to use, but limits the layout to a 'row 1 column (12 - full)'.

Place layout row first requires additional effort, but allows more flexible layouts using rows like '6 - 6' or '4 - 4 - 4'.

Opens the first entry when the page is loaded.

Controls if multiple entries in the accordion can be opened simultaneously.

If this is not set opening an entry automatically closes the entry that is currently open.