Accordion

Übersicht

Der Accordion ermöglicht es Ihnen, Inhalte in zusammenklappbare Bereiche zu organisieren. Benutzer sehen zunächst nur die Überschriften und können die Elemente erweitern, die sie interessieren – so bleiben Ihre Seiten übersichtlich und scannbar.

*Beispiel eines Accordions mit mehreren eingeklappten Elementen*

Felder

Aktiv

Feldname: isActive
Typ: Boolean
Standardwert: true
Erforderlich: Nein
Zweck: Steuert, ob dieser Accordion‑Bereich auf der Website angezeigt wird.
Hinweis: Wenn isActive deaktiviert ist, wird der gesamte Accordion‑Block auf der Seite nicht gerendert – Inhalte bleiben im CMS erhalten, sind aber für Besucher unsichtbar.

Bereichsüberschrift

Typ: String
Erforderlich: Nein
Zweck: Hauptüberschrift für den gesamten Accordion
Beispiel:
Häufig gestellte Fragen

Bereichs-Unterüberschrift

Typ: Text
Erforderlich: Nein
Zeilen: 2
Zweck: Kurze Beschreibung oder Kontext für den Bereich
Beispiel:
Alles, was Sie über unser Unternehmen wissen müssen

Accordion-Elemente

Typ: Array von Accordion-Element-Objekten
Erforderlich: Nein
Zweck: Die erweiterbaren Inhaltsbereiche

Jedes Accordion-Element enthält:

Elementüberschrift

Typ: String
Erforderlich: Ja (Pflichtfeld)
Zweck: Der klickbare Titel, der im eingeklappten Zustand angezeigt wird
Beispiel:
Wie sind unsere Öffnungszeiten?

Icon

Typ: Lucide Icon
Erforderlich: Nein
Zweck: Ein Lucide-Icon, das neben der Überschrift angezeigt wird
Quelle: Lucide Icon-Bibliothek
Beispiele: Clock, Car, Calendar, Euro

Auswählen eines Icons aus der Lucide Icon-Bibliothek

Inhalt

Typ: Rich Text Section (richTextSection)
Erforderlich: Ja (Pflichtfeld)
Zweck: Rich-Text-Inhalt, der beim Erweitern angezeigt wird
Hinweis: Unterstützt vollständige Formatierung, Bilder, Links usw.

Hintergrundfarbe

Typ: Referenz (backgroundColor)
Erforderlich: Nein
Zweck: Legt die Hintergrundfarbe für den gesamten Bereich fest

Verwendungsbeispiel

Typische Konfiguration

Bereichsüberschrift: Häufig gestellte Fragen
Bereichs-Unterüberschrift: Alles, was Sie über unsere Dienstleistungen wissen müssen
Accordion-Elemente:
1. “Wie lange dauert der Prozess?” (Clock-Icon)
  - Inhalt: Details zum Zeitplan und Faktoren, die die Dauer beeinflussen
2. “Welche Optionen stehen zur Verfügung?” (Package-Icon)
  - Inhalt: Liste der verfügbaren Service-Stufen oder Produktoptionen
3. “Wie viel kostet es?” (DollarSign-Icon)
  - Inhalt: Preisinformationen nach Service-Level oder Paket
4. “Bieten Sie flexible Terminplanung?” (Calendar-Icon)
  - Inhalt: Informationen zur Terminverfügbarkeit und Buchungsoption

Best Practices

Überschriften: Machen Sie sie klar und spezifisch – Benutzer sollten wissen, was drin ist, bevor sie erweitern
Anzahl der Elemente: 3-8 Elemente funktionieren am besten. Zu wenige rechtfertigen kein Accordion; zu viele werden überwältigend
Inhaltslänge: Halten Sie jedes Element fokussiert. Wenn der Inhalt zu lang wird, sollten Sie ihn in mehrere Elemente aufteilen
Icons: Verwenden Sie sie konsistent oder gar nicht. Sie sollten Klarheit schaffen, nicht nur Dekoration sein
Gruppierung: Organisieren Sie verwandte Elemente logisch zusammen
Hintergrundfarbe: Verwenden Sie sparsam – hoher Kontrast kann die Lesbarkeit reduzieren

Hauptmerkmale

Platzsparend: Lange Inhalte bleiben eingeklappt, bis sie benötigt werden
Scannbar: Benutzer sehen alle Themen auf einen Blick über die Überschriften
Barrierefrei: Unterstützt Screenreader und Tastaturnavigation
Interaktiv: Benutzer kontrollieren, was sie sehen
Reichhaltiger Inhalt: Vollständige Formatierungsunterstützung innerhalb jedes Elements

Wo es verwendet wird

Seiten (page)
Allgemeine Inhaltsseiten
Rechtliche Seiten (legalPage)
Datenschutzerklärungen, Nutzungsbedingungen usw.

Technische Hinweise

Jedes Accordion-Element kann unabhängig erweitert/eingeklappt werden
Inhalt verwendet den Typ richTextSection für vollständige Formatierungsmöglichkeiten
Icons stammen aus der Lucide Icon-Bibliothek
Hintergrundfarbe verweist auf das globale backgroundColor-Schema

Wann Accordion vs. Rich Text Section verwenden

Accordion	Rich Text Section
Informationen, die Benutzer überspringen möchten	Inhalte, die jeder lesen sollte
Mehrere unterschiedliche Themen	Eine fortlaufende Erzählung
FAQs und Q&A-Format	Artikel und Blog-Posts
Lange Referenzinformationen	Kurze bis mittlere erklärende Texte
Interaktive Browsing-Erfahrung	Lineare Leseerfahrung