Accordion

  1. Showroom Home
  2. Components
  3. Accordion

Purpose

By using the Accordion component text elements, text & media elements (with or without footnotes) and tables on a page can be opened and closed.

To create an Accordion within a page, first the Accordion component needs to be integrated on the page. Within this Accordion component the various items can be integrated by selecting the Accordion Item (versatile). Within that component the following components are selectable:

The author can decide whether all or just one element of the accordion should stay open at a time. Per default all accordion items are displayed closed. Furthermore, anchor IDs can be defined for the single Accordion Items.

The scrolling behavior of the Accordion component works as follows: When opening an Accordion Item, it is scrolled to the top of the selected Accordion Item, instead of scrolling to the top of the entire Accordion. This especially optimizes the scrolling behavior for Accordions that contain many Accordion Items.

Go directly to

Examples

The following examples show what the component can look like. Depending on the configuration, a component can be displayed in different ways.

Accordion Item Example 1 with Text component

Accordion Item settings: Show check icon checked

The component integrated in the Accordion Item is a Text component

Accordion Item Example 2 with Text & Media component
Accordion Item Text Media

Accordion Item settings: Show check icon not checked

The component integrated in the Accordion Item is a Text & Media component

 

Accordion Item Example 3 with Table component
Table within Accordion Item
 Table within Accordion Item Table within Accordion Item
Integrate more information here Integrate more information here Integrate more information here
Accordion Item Example 4 with Table Advanced

Table advanced within Accordion Item

Table advanced within Accordion Item

 

Table advanced within Accordion Item

Table advanced within Accordion Item
Accordion Item Example 2 with Text & Media & Footnote component

Text & Media & Footnote component within Accordion Item component.

Accordion Item Text & Media & Footnote

Footnote can be added here, using Rich Text Editor for styling purposes.

Configuration

To create the component, follow the steps below. 

  • Step 1
    Integrate Accordion component into Drag Component area
  • Step 2
    Click on the Above sign
  • Step 3
    Configure     component    
Configuring the accordion component
  • Step 4 
    Choose the Collapsing behavior from the dropdown: Only one element at once expandable or Elements expandable independently
  • Step 5 
    Save changes
  • Step 6
    Within the Accordion select the Accordion Item (versatile)
  • Step 7
    Configure Accordion Item (versatile)
Configuring the accordion item versatile
  • Step 8 
    Choose initial state from dropdown (Closed or open)
  • Step 9
    Integrate Headline
  • Step 10
    Check the checkbox to Show check icon
  • Step11
    Integrate Anchor ID
  • Step 12
    Save changes
Available components within Accordion Item versatile
  • Step 13
    Within the Accordion Item (versatile) the following components are selectable: Text, Text & Media, Table, Table (advanced), Text & Media & Footnote
  • Step 14
    The components Text, Text & Media, Table, Table (advanced) can be configured the same way as outside the Accordion
Text & Media & Footnote within Accordion Item versatile
  • Step 15
    The component Text & Media & Footnote is specific to the Accordion and can be configured as follows
  • Step 16
    Within the field Text integrate the text using the Rich Text Editor (see also component Text)
  • Step 17
    Within the field Media integrate your Media asset (see also component Media)
  • Step 18
    Within the field Footnote integrate the text for the Footnote
Erinnerung für
Fehler Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.

Sollen wir Sie benachrichtigen wenn der Artikel verfügbar ist?

hh

Tag der Erinnerung
Zwei Tage vorher
Einen Tag vorher
Am Angebotstag
Uhrzeit
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Hinweise
  • line 1
  • line 2
  • ...

Eine Erinnerung ist nicht mehr möglich

Die Erinnerungszeiten für diesem Artikel sind bereits abgelaufen.

Erinnerung aktiv!

hh

Sie erhalten Ihre Erinnerung am ${date} um ${time} Uhr.

hh

Wir senden Ihnen noch eine Nachricht per E-Mail, um ihre E-Mail Adresse zu bestätigen. Bitte klicken Sie auf den Link in der Nachricht.

regions.regionSwitchHeadline

regions.regionSwitchText
regions.regionSwitchTextExplicitSwitch