CSS-Akkordeon-Generator
Akkordeon ohne JavaScript mit details und summary gestalten: Farben, Icons, Abstände und Animation einstellen, HTML und CSS kopieren.
Der CSS-Akkordeon-Generator baut ein Akkordeon ohne JavaScript auf Basis der HTML-Elemente details und summary. Du stellst Farben, Rahmen, Abstände, Icon und Animation ein, testest das Auf- und Zuklappen in der Vorschau und kopierst HTML und CSS. Tastaturbedienung und Screenreader-Unterstützung sind eingebaut.
<div class="accordion">
<details open>
<summary>Was ist ein Akkordeon?</summary>
<div class="accordion-content">
<p>Ein Element, das Inhalte platzsparend ein- und ausklappt. Es eignet sich für FAQs, Filter und lange Formulare.</p>
</div>
</details>
<details>
<summary>Brauche ich JavaScript?</summary>
<div class="accordion-content">
<p>Nein. Die HTML-Elemente details und summary bringen das Auf- und Zuklappen samt Tastaturbedienung mit.</p>
</div>
</details>
<details>
<summary>Ist das barrierefrei?</summary>
<div class="accordion-content">
<p>Ja. Screenreader erkennen summary als Schalter und kündigen den Zustand „erweitert“ oder „reduziert“ an.</p>
</div>
</details>
</div>Akkordeon mit details und summary
Früher brauchte ein Akkordeon JavaScript für Klicks, Zustände und ARIA-Attribute. Heute
liefert HTML das alles mit: <details> umschließt einen Eintrag, <summary> ist die anklickbare Überschrift. Mit CSS entfernst du den Standard-Pfeil
und gestaltest ein eigenes Icon.
| Baustein | Aufgabe |
|---|---|
details[open] | Zustand „geöffnet“ für Stile und Icon-Drehung |
summary::-webkit-details-marker | Standard-Pfeil in Safari ausblenden |
name="…" | Nur ein Eintrag der Gruppe ist offen |
::details-content | Inhalt animieren (progressive Verbesserung) |
Typischer Einsatz
Akkordeons eignen sich für FAQ-Bereiche, Produktdetails und lange Formulare. Wichtige Inhalte sollten nicht nur im zugeklappten Bereich stehen. Den passenden Schalter für Einstellungen gestaltest du im Toggle-Switch-Generator, Tooltips im Tooltip-Generator.
Häufige Fragen
Funktioniert das Akkordeon ohne JavaScript?
Ja. Das details-Element öffnet und schließt sich per Klick oder Tastatur von selbst. Das CSS gestaltet nur das Aussehen, die Funktion liefert der Browser.
Wie sorge ich dafür, dass nur ein Eintrag offen ist?
Gib allen details-Elementen dasselbe name-Attribut, zum Beispiel name="accordion". Aktuelle Browser schließen dann automatisch die anderen Einträge, sobald einer geöffnet wird. Ältere Browser ignorieren das Attribut einfach.
Wie wird das Aufklappen animiert?
Über das Pseudo-Element ::details-content und interpolate-size: allow-keywords lässt sich die Höhe von 0 auf auto animieren. Browser ohne Unterstützung klappen ohne Animation auf, die Funktion bleibt erhalten.
Ist ein details-Akkordeon barrierefrei?
Ja. summary wird als Schalter mit Zustand „erweitert“ oder „reduziert“ angesagt und ist per Tab und Enter bedienbar. Achte auf einen sichtbaren Fokusrahmen; der Generator setzt ihn über :focus-visible.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.