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.

Hinweis

Ideal für: FAQs, Produktspezifikationen, Schritt-für-Schritt-Anleitungen, rechtliche Informationen, Feature-Beschreibungen.

---

Beispiel eines Accordions mit mehreren eingeklappten Elementen

---

Felder

Die Accordion-Felder in Sanity Studio

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

Hinzufügen und Verwalten von Accordion-Elementen im Array

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