Das details-Element: Aufklappen ohne JavaScript

vom 04.01.2016 von Oliver Misch

Jahrelang brauchte man für Auf- und Zuklappbereiche JavaScript. Heute erledigt das ein HTML-Element: <details> versteckt seinen Inhalt hinter einer anklickbaren Zeile, die das <summary>-Element liefert. FAQ-Listen, lange Erklärungen, optionale Details: alles ohne eine Zeile Skript.

Syntax und Beispiel

HTML-Code

<details>
    <summary>Warum sieht dieses Wiki aus wie 1998?</summary>
    <p>Weil wir die Ära großartig finden. Die Technik darunter
    ist trotzdem topaktuell.</p>
</details>

So verhält es sich

• Ohne weiteres Zutun startet der Bereich zugeklappt. Mit dem Attribut open startet er aufgeklapt.
• Das kleine Dreieck kommt vom Browser. Es lässt sich per CSS umgestalten oder ausblenden, das mobile Menü dieser Website ist zum Beispiel ein umgestyltes details.
• Tastatur und Screenreader funktionieren von Haus aus: Fokussieren, Enter oder Leertaste, auf und zu. Genau die Sorte Arbeit, die man sich mit selbstgebauten JavaScript-Lösungen gern kaputt macht.
• Browser-Suchfunktionen können zugeklappte Inhalte je nach Browser finden und automatisch aufklappen, praktish.

Exklusives Aufklappen

Gibst du mehreren details dasselbe name-Attribut, verhalten sie sich wie ein Akkordeon: Öffnet sich eins, schließt sich das andere. Das ist eine recht junge Ergänzung, für unkritische Fälle wie FAQ-Listen aber längst brauchbar, im schlimmsten Fall bleiben in einem alten Browser eben mehrere gleichzeitig offen.

Wofür es nicht gedacht ist

details ist für Inhalte die man optional lesen kann. Wichtige Informationen (Preise, Fristen, Warnungen) gehören sichtbar auf die Seite, nicht hinter einen Klapper. Auch als Hauptnavigations-Ersatz auf Desktopseiten wirkt es schnell hakelig. Und für Dialogfenster mit Fokus-Fang gibt es das passendere dialog.

Verwandt: summary · dialog · Tutorial: FAQ-Seite