Skip to main content

Akkordeon (FAQ-Modul)

Das Akkordeon dient dazu, Inhalte kompakt und übersichtlich darzustellen: In der Ansicht werden zunächst nur Titel/Fragen angezeigt. Erst nach Klick wird der jeweilige Text/Antwortbereich aufgeklappt. 

Typischer Einsatz: FAQ-Bereiche mit Frage (Titel) + Antwort (Fließtext).

Auf einen Blick

  • Verhalten: Titel sichtbar, Inhalte per Klick aufklappbar 
  • Inhalte: mehrere Titel mit jeweils eigenem Text 
  • Gestaltung: maßvoll nutzen; für FAQs gut geeignet; Tabellen nicht zur Layoutgestaltung verwenden (auch aus Barrierefreiheitsgründen). 
  • Container: Akkordeon ist in Containern erlaubt.

Wann ist das sinnvoll?

Nutzen Sie das Akkordeon, wenn …

  • viele Inhalte zwar relevant sind, aber nicht alle gleichzeitig gelesen werden müssen (FAQ, kurze Erklärungen, Begriffe). 

Nutzen Sie besser normale Inhalte (Text + Zwischenüberschriften), wenn …

  • der Inhalt von Anfang an sichtbar sein soll (z. B. wichtige Hinweise, Kernbotschaften) oder
  • Nutzer:innen den Inhalt scannen können sollen, ohne viel zu klicken (dann lieber sauber gliedern).

Bedienung

  1. Neues Inhaltselement anlegen und Akkordeon (FAQ-Modul) auswählen. 
  2. Pro Eintrag eine Frage/Titel und den dazugehörigen Antworttext pflegen (Fließtext, gern kurz und gut lesbar). 
  3. Reihenfolge der Fragen so sortieren, wie Nutzer:innen sie typischerweise erwarten (z. B. „Allgemein → Detail“).
  4. Speichern und im Frontend prüfen: Klappt jede Frage korrekt auf, sind die Texte verständlich?

Gute Praxis

  • Weniger ist mehr: Akkordeons wirken schnell „voll“. Halten Sie die Einträge daher möglichst prägnant und vermeiden Sie zu tiefe Verschachtelungen.
  • Keine Tabellen fürs Layout: Tabellen bitte nur für echte Tabelleninhalte einsetzen – nicht, um Spalten/Layouts zu bauen.
  • Barrierearm schreiben: klare Fragen, kurze Antworten, aussagekräftige Linktexte (nicht „hier klicken“). 
  • Bei vielen FAQs: ergänzend Sprungmarken/Ankerlinks nutzen (z. B. Themenblöcke wie „Studium“, „Bewerbung“, „Kontakt“).

Beispieleinbindung

Frage 1

Frage 2