Skip to main content

Accordion

Die Accordion-Komponente ist ein Aufklapp-Menü. Klickt man auf den Kopfbereich, bestehend aus Icon und Überschrift, klappt der Inhalt mit zusätzlichen Informationen auf. Somit ist es ein interaktives Navigationselement, welches dazu dient, umfangreiche Inhalte platzsparend darzustellen.

Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zugeordnete Inhalte angezeigt oder verborgen werden sollen. Sie erlauben umfangreichere Detailinformationen zu einem Oberbegriff, als es aus Gründen der Übersichtlichkeit eigentlich sinnvoll wäre. Sie überlassen es den Besucher:innen selbst, ob sie sich diese Informationen anzeigen lassen möchten.

Konstruktion

Code

<div className="grid gap-2">
<kol-accordion _heading="Element 1">
<div slot="content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div slot="header">Inhalt eines Header</div>
</kol-accordion>
<kol-accordion _heading="Element 2">
<div slot="header">Inhalt im Header</div>
<div slot="content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div slot="footer">Inhalt im Footer</div>
</kol-accordion>
</div>

Beispiel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Inhalt eines Header
Inhalt im Header

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Inhalt im Footer

Verwendung

Überschrift im Accordion-Tab

Der Text, der als Überschrift im Accordion-Tab angezeigt werden soll, wird durch das Attribut _heading übergeben. Der Text kann neben Sonderzeichen auch Umlaute oder Leerzeichen enthalten.

Überschriftenebene

Die Überschriftenebene wird durch das Attribut _level übergeben. Möglich sind die Level 1 bis 6

Inhalt im Kopfbereich des Accordion

Ein optisch abgetrennter Inhalt im Kopfbereich des Accordions wird über einen eigenen Slot übergeben. Gibt es diesen Slot nicht oder wird er leer übergeben, ist der Kopfbereich nicht sichtbar.

<div slot="header">Inhalt im Kopfbereich</div>

Inhalt des Accordion

Der Hauptinhalt des Accordions wird über einen eigenen Slot übergeben.

<div slot="content">Inhalt im Kopfbereich</div>

Accordion geöffnet anzeigen

Standardmäßig wird das Accordion nach dem Laden der Seite im geschlossenen Zustand angezeigt. Soll das Accordion geöffnet angezeigt werden, setzen Sie das Attribut ** _open** zusätzlich ein.

Best practices

  • Verwenden Sie ein Accordion, um lange Textabschnitte unter einem thematischen Oberbegriff zusammenzufassen
  • Verwenden Sie ein Accordion, um weniger wichtige Informationen, als Ergänzung zu Hauptinformationen, zur Verfügung zu stellen.
  • Mit einem Accordion können Sie die Länge Ihrer Webseite deutlich reduzieren und stellen gleichzeitig die Erreichbarkeit aller Informationen für die Nutzer:innen sicher.
  • Verwenden Sie eindeutige Überschriften, um die Nutzer:innen auf die weiteren Informationen des Accordions hinzuweisen.
  • Vermeiden Sie, wichtige Call-To-Action-Elemente innerhalb eines Accordions zu verbergen.
  • Lassen Sie Fehlermeldungen nicht innerhalb des Accordions anzeigen, um zu vermeiden, dass Nutzer:innen wichtige Informationen übersehen.
  • Verwenden Sie ein Accordion nicht als Auswahl-Element für Nutzer:innen.
  • Verwenden Sie ein Accordion nicht, um wichtige Informationen zu rechtlichen Angaben oder zum Datenschutz anzuzeigen.

Anwendungsfälle

  • Häufig gestellte Fragen (FAQ)

Barrierefreiheit

In der Accordion-Komponente wird das Öffnen-/Schließen-Icon links ausgerichtet, um Nutzer:innen mit eingeschränktem Sichtfeld eine bessere Bedienbarkeit zu ermöglichen.

Es wurde bewusst auf die Verwendung von Icons, wie z.B. < oder > verzichtet. Die Verwendung der Icons + und - gewährleistet eine bessere Sicht- und Erkennbarkeit bezüglich des Geöffnet- und Geschlossen-Status.

Bei der farblichen Gestaltung wurde besonders Wert auf einen höchstmöglichen Kontrast in der Standardansicht gelegt.

Tastatursteuerung

TasteFunktion
TabSpringt die einzelnen Accordion-Tabs an.
EnterÖffnet bzw. schließt den fokussierten Accordion-Tab.

Properties

PropertyAttributeDescriptionTypeDefault
_heading (required)_headingGibt die Überschrift des Accordions an.stringundefined
_level_levelSetzt den H-Level, von 1 bis 6, der Überschrift.0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined1
_on--Gibt die EventCallback-Funktionen an.undefined | { onClick?: EventValueOrEventCallback<Event, boolean> | undefined; }undefined
_open_openGibt an, ob das Accordion geöffnet ist.boolean | undefinedfalse

Slots

SlotDescription
Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.
"content"Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.
"header"Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions.

Dependencies

Depends on

Graph


Live-Editor

Beispiele

Einfache Accordions

Accordions mit Überschriften

Accordions mit Header-Slot