Accordion
Synonyme: Collapse
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 class="grid gap-2">
<kol-accordion _label="Element 1">
<div>
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>
</kol-accordion>
<kol-accordion _label="Element 2">
<div>
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>
</kol-accordion>
</div>
Events
Zur Behandlung von Events bzw. Callbacks siehe
| Event | Auslöser | Value |
|---|---|---|
click | Element wird angeklickt | - |
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.
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.
Verwendung
Überschrift im Accordion-Tab
Der Text, der als Überschrift im Accordion-Tab angezeigt werden soll, wird durch das Attribut _label ü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 des Accordion
Der Hauptinhalt des Accordions wird über den Slot übergeben.
<kol-accordion _label="Element 1">Accordion-Inhalt</kol-accordion>
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.
Vorteile
- Platzersparnis: Ideal für Inhalte, die sonst viel Platz einnehmen würden.
- Verbesserte Nutzererfahrung: Nutzer:innen können Inhalte gezielt ein- und ausklappen.
- Struktur und Übersicht: Inhalte werden logisch gegliedert und wirken weniger überfordernd.
Best practices
-
Zweckmäßiger Einsatz
Verwenden Sie Accordions, um Inhalte unter einem thematischen Oberbegriff zu gruppieren, insbesondere bei langen Textabschnitten oder detaillierten Informationen. -
Unterstützende Informationen
Platzieren Sie in Accordions eher ergänzende oder weniger wichtige Informationen, die nicht unbedingt sofort sichtbar sein müssen. -
Reduktion der Seitenlänge
Nutzen Sie Accordions, um die visuelle Länge einer Webseite zu reduzieren, ohne die Zugänglichkeit von Inhalten einzuschränken. -
Eindeutige und beschreibende Überschriften
Verwenden Sie prägnante und aussagekräftige Überschriften, die den Inhalt des jeweiligen Abschnitts klar beschreiben, um die Orientierung zu erleichtern. -
Wichtige Aktionen und Inhalte sichtbar halten
Vermeiden Sie es, kritischeCall-to-Action-Elemente oder zentrale Informationen innerhalb eines Accordions zu verstecken. -
Sichtbarkeit von Fehlermeldungen sicherstellen
Platzieren Sie Fehlermeldungen immer außerhalb eines Accordions um zu vermeiden, dass wichtige Informationen übersehen werden. -
Nicht als Auswahl-Element verwenden
Verwenden Sie Accordions nicht als interaktive Auswahl- oder Filterelemente, da sie für solche Interaktionen nicht intuitiv sind. -
Wichtige rechtliche Informationen außerhalb platzieren
Anzeigen wie Datenschutz- oder rechtliche Hinweise sollten nicht in Accordions versteckt werden, da diese stets leicht zugänglich und sichtbar sein müssen. -
Maximale Lesbarkeit
Halten Sie die Inhalte innerhalb eines Accordions kurz und übersichtlich. Verwenden Sie Listen, Absätze oder visuelle Trennungen, um eine Überforderung zu vermeiden. -
Standardmäßig wichtige Inhalte sichtbar machen
Überlegen Sie, ob es sinnvoll ist, einen oder mehrere Accordion-Abschnitte standardmäßig geöffnet zu lassen, insbesondere wenn diese Inhalte oft benötigt werden. -
Performance berücksichtigen
Stellen Sie sicher, dass das Accordion keine Ladezeitprobleme verursacht, insbesondere bei dynamisch geladenen Inhalten. Inhalte sollten möglichst asynchron und effizient geladen werden.
Anwendungsfälle
- Häufig gestellte Fragen (FAQ)
- Darstellung von Details, Eigenschaften oder Varianten eines Elements
- Gruppierungen von
- Formularen mit vielen Optionen
- Daten in Dashboards
- Filterfunktionen
- Darstellung von Menüs auf kleinen Bildschirmen, bei denen Platz begrenzt ist
- Gliederung in Einstellungsseiten
- Aufteilung langer Artikel oder Dokumentationen in logische Abschnitte
- Dynamisches Laden von Inhalten, welche nur bei Bedarf geladen werden
- Darstellung eines Prozesses oder einer Anleitung, bei der einzelne Schritte ausgeklappt werden
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
| Taste | Funktion |
|---|---|
Tab | Springt die einzelnen Accordion-Tabs an. |
Enter | Öffnet bzw. schließt den fokussierten Accordion-Tab. |
Links und Referenzen
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_disabled | _disabled | Makes the element not focusable and ignore all events. | boolean | undefined | false |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined |
_level | _level | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined | 0 |
_on | -- | Gibt die EventCallback-Funktionen an. | undefined | { onClick?: EventValueOrEventCallback<MouseEvent, boolean> | undefined; } | undefined |
_open | _open | Opens/expands the element when truthy, closes/collapses when falsy. | boolean | undefined | false |
Methods
kolFocus
kolFocus() => Promise<void>
Sets focus on the internal element.
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions. |