Die Akkordeon-Komponente ermöglicht es dir, Inhalte in ein- und ausklappbare Bereiche zu strukturieren. Nutzer:innen sehen zunächst nur die Überschriften (Akkordeon-Labels) und können bei Bedarf einzelne Bereiche öffnen.
Sie eignet sich besonders für:
FAQ-Bereiche
strukturierte Informationsseiten
umfangreiche Textinhalte
technische oder detaillierte Erklärungen
Aufbau der Komponente
Beim Öffnen der Akkordeon-Komponente kannst du:
eine Headline hinzufügen oder ausblenden
eine Subheadline hinzufügen oder ausblenden
Die eigentlichen Inhalte werden als einzelne Akkordeon-Items angelegt.
Struktur eines Akkordeon-Items
Jedes Item besteht aus:
einem Label (sichtbare Überschrift)
einem Inhaltsbereich, der beim Öffnen sichtbar wird
Innerhalb des Inhaltsbereichs kannst du über das Plus-Icon weitere Komponenten einfügen.
Nicht alle Komponenten sind innerhalb eines Akkordeons verfügbar, da sich nicht jede für diese Struktur eignet. Die bereitgestellte Auswahl deckt jedoch typische Anwendungsfälle ab.
Die Anzahl der Akkordeon-Items ist nicht begrenzt.
Einstellungen pro Akkordeon-Item
Über das Drei-Punkte-Menü eines Akkordeon-Items kannst du:
das Item kopieren
das Item ein- oder ausblenden
einen Deep Link (Anchor) vergeben
Deep Links ermöglichen es, direkt auf ein bestimmtes Akkordeon-Element zu verweisen. Das ist besonders hilfreich bei längeren FAQ-Seiten.
Farbschema
Für die Akkordeon-Komponente kann ein eigenes Farbschema festgelegt werden.
Innerhalb der geöffneten Bereiche können eingefügte Komponenten ebenfalls ein eigenes Farbschema erhalten. Wird kein eigenes Schema vergeben, übernehmen sie das Farbschema des Akkordeons.
Unterschiede zur Tab-Komponente
Akkordeons zeigen mehrere Inhalte untereinander an.
Tabs wechseln zwischen Inhaltsbereichen.
Akkordeons eignen sich besser für FAQs und lineare Inhalte.
Tabs eignen sich besser für klar getrennte Themenblöcke.
Tipps & Tricks
Verwende klare, prägnante Labels.
Nutze Akkordeons, um lange Seiten optisch zu reduzieren.
Vermeide zu tiefe Verschachtelungen, um die Navigation nicht zu erschweren.
Nutze Deep Links strategisch bei umfangreichen FAQ-Strukturen.