CBK-031 Accordion

Wann wird die Komponente verwendet?

Das Akkordeon ermöglicht die Erstellung und Darstellung von Inhalten in einem geschlossenen Bereich, die als einzelne vertikale Listenpunkte dargestellt werden und aufklappbar sind. Dadurch ist es möglich viel Inhalt auf wenig Platz darzustellen. Das Akkordeon ist also eine visuelle als auch strukturelle Option die Inhalte von Seiten zu unterteilen und abzubilden.

Das Akkordeon besteht aus einzelnen Listenpunkten (Items), die untereinander abgebildet sind. Die Akkordeon-Inhalte befinden sich strukturell in einem Group Container. Dieser dient als Rahmen für weitere Akkordeon-Iteminhalte, in den weitere Standardkomponenten eingefügt werden können wie beispielsweise Title oder Text.

Dialogfelder

Konfiguration Items

Items-Tab des Akkordeon-Elements ohne Befüllung

Allgemein:

  • Items dienen dem Hinzufügen einzelner Akkordeonzeilen.
  • Items sind in der Standardeinstellung nicht befüllt.
  • Ein Akkordeonmodul benötigt strukturell einen Group Container für weitere Inhalte, daher ist nur  "Add" erscheint entsprechend ein Group Container als einzige Auswahl.
Items-Tab beim Hinzufügen eines neuen Group Containers für das Akkordeonmodul

Add: 

  • Fügt ein neues Akkordeonitem hinzu.
  • Nach dem Hinzufügen muss ein Akkordeonitem-Titel vergeben werden, der auch so im Aufklappmodul angezeigt wird.
  • Im hinzugefügten Group Container lassen sich über weitere Komponenten die Inhalte für das Akkordeon einfügen, beispielsweise Title oder Text.
  • Mehrere Akkordeon-Items lassen sich in einem Akkordeon platzieren.
Beispielhaftes Accordion Item im Items Tab der Akkordeon-Komponente

Beispiel Akkordeon-Items

Überschrift im Akkordeon

Platzhalter-Text lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Überschrift im Akkordeon

Platzhalter-Text mit einem Platzhalter-Bild.

Konfiguration Properties

Properties-Tab unausgefüllt in einer Akkordeon-Komponente
  • Single item expansion: per Checkbox wird ausgewählt, welche Akkordeonelemente standardmäßig aufgeklappt angezeigt werden
    • Es öffnet sich ein Dropdown, in dem aus allen Akkordeon-Items das dauerhaft augeklappte Akkordeonmodul ausgewählt werden kann.
  • Standardmäßig sind alle Akkordeonelemente geschlossen.
  • Die Einstellung sollte auf ein Akkordeonmodul begrenzt sein, damit die Seite nicht zu lang wird.
Tab Properties mit angehakter Einstellung zu geöffnetem ersten Akkordeon

Beispiel Akkordeon-Items

Überschrift im Akkordeon

Platzhalter-Text lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 

Überschrift im Akkordeon

Platzhalter-Text mit einem Platzhalter-Bild.

Wie öffne und bearbeite ich ein bestimmtes Akkordeon-Item?

In einem Akkordeon können sich mehrere Akkordeon-Items befinden. Um ein bestimmtes Akkordeon-Item zu öffnen:

  • Zuerst auf das Panel-Symbol klicken.
  • Es erscheint eine Liste unter des Panel-Symbols mit allen Akkordeon-Items in diesem Akkordeon.
  • Per Klick auf das Item wird das gewünschte Element geöffnet und kann bearbeitet werden.

Achtung: Ein Akkordeon-Item mit der Einstellung "Single Item Expansion" wird für die Auswahl kurz geschlossen zur besseren Übersicht. Die Expansion lässt sich mit einem erneuten Klick auf das Panel-Symbol wieder einstellen.

Akkordeon Item mit Panel-Symbol