Akkordeon & FAQ ohne JavaScript – <details> und <summary>
Aufklappbare Abschnitte brauchen kein JavaScript. Das HTML-Paar <details>/<summary> bringt das Auf- und Zuklappen von Haus aus mit – barrierefrei und tastaturbedienbar. Ich zeige das Markup, ein sauberes Styling und wie du eine echte Akkordeon-Gruppe baust.
Für ein FAQ oder aufklappbare Abschnitte greifen viele reflexartig zu JavaScript. Dabei gibt es das seit Jahren nativ im Browser: <details> mit <summary>. Aufklappen, Tastaturbedienung und Screenreader-Unterstützung sind eingebaut.
Das Markup
<details>
<summary>Wie lange dauert ein Projekt?</summary>
<p>Je nach Umfang zwei bis acht Wochen. Wir klären das im Erstgespräch.</p>
</details><summary> ist die immer sichtbare Zeile, der Rest klappt auf und zu. Mit dem Attribut open (<details open>) startet ein Abschnitt aufgeklappt.
Sauberes Styling
Standardmäßig zeigt der Browser ein kleines Dreieck. Das kannst du ersetzen und den Rest frei gestalten:
details {
border: 1px solid #e2e2e2;
border-radius: 10px;
padding: 12px 16px;
margin-bottom: 8px;
}
summary {
cursor: pointer;
font-weight: 600;
list-style: none; /* Standard-Dreieck weg */
}
summary::after {
content: "＋";
float: right;
}
details[open] summary::after {
content: "－"; /* offen: Minus zeigen */
}details[open] greift nur, wenn der Abschnitt offen ist – so drehst du das Icon ohne eine Zeile Skript.
Echtes Akkordeon: immer nur einer offen
Sollen sich die Abschnitte gegenseitig schließen (klassisches Akkordeon), gib allen <details> denselben name – ein modernes HTML-Feature, das genau das erledigt:
<details name="faq"><summary>Frage 1</summary><p>…</p></details>
<details name="faq"><summary>Frage 2</summary><p>…</p></details>
<details name="faq"><summary>Frage 3</summary><p>…</p></details>Öffnest du eines, schließt der Browser die anderen mit demselben name automatisch – wie Radio-Buttons, nur für aufklappbare Bereiche.
Weniger Code, bessere Barrierefreiheit, keine Bibliothek. Für FAQs baue ich das nur noch so.
Quellen
Du brauchst mehr als ein Snippet?
Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.
Projekt anfragen →Verwandte Snippets
:is() und :where() – kürzere Selektoren, und einer davon wiegt nichts
Drei fast gleiche Selektoren untereinander, nur weil die Überschrift mal h2 und mal h3 heißt? :is() fasst das zusammen. Und :where() macht dasselbe, ohne die Spezifität hochzutreiben – der Unterschied ist der ganze Trick.
content-visibility – lange Seiten rendern, ohne dass der Browser alles auf einmal baut
Bei sehr langen Seiten rechnet der Browser Layout und Malen für jeden Abschnitt – auch für die, die 8.000 Pixel weiter unten liegen. Eine CSS-Eigenschaft verschiebt diese Arbeit auf den Moment, in dem sie gebraucht wird.
color-mix() – Hover- und Dark-Mode-Farben ausrechnen lassen, statt sie zu pflegen
Für jede Markenfarbe eine hellere, eine dunklere und eine transparente Variante von Hand zu pflegen, ist Fleißarbeit mit Fehlerquote. color-mix() mischt sie im Browser – aus genau einer Quellfarbe.