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
@layer in CSS: Kaskadenebenen statt !important-Wettrüsten
Irgendwann steht in jedem gewachsenen Stylesheet das erste !important – und ein halbes Jahr später das dreißigste. Mit @layer legst du die Reihenfolge einmal fest, und ab da gewinnt nicht mehr der längste Selektor, sondern die Ebene, die du bestimmt hast.
Tooltips ohne JavaScript – CSS Anchor Positioning
Ein Tooltip an einen Button hängen, der ausweicht, wenn oben kein Platz ist, und nicht am overflow: hidden der Elternbox scheitert – das brauchte jahrelang eine Bibliothek. Seit Firefox 147 kann das jeder große Browser in reinem CSS.
Schöne Zeilenumbrüche in CSS – text-wrap balance und pretty
Eine Überschrift, bei der ein einzelnes Wort einsam in der letzten Zeile hängt, sieht unruhig aus. Mit text-wrap balance und pretty überlässt du dem Browser das saubere Umbrechen – ohne manuelle <br> und ohne JavaScript.