<details> / <summary>
HTML-Elemente, die ganz ohne JavaScript einen eingebauten Ausklapp-Bereich liefern. <details> versteckt seinen Inhalt hinter einer klickbaren <summary>-Überschrift, die sich auf- und zuklappen lässt. Von Haus aus barrierefrei und tastaturfreundlich.
Mechanik: Inhalt in <details> packen, mit einem <summary> als Erstes; der Browser zeigt nur die Summary, bis man klickt, dann klappt der Inhalt auf. Das open-Attribut steuert bzw. spiegelt den Zustand. Anwendungsfälle: FAQ-Bereiche, "Mehr lesen"-Ausklappungen, einklappbare Panels, Spoiler — alles, was früher JS zum Ein- und Ausblenden brauchte. Neuerer Kniff: Das name-Attribut lässt mehrere <details> mit demselben Namen sich wie ein exklusives Akkordeon verhalten (immer nur eines offen) — ebenfalls ohne JS. Der Gewinn: kostenlose Barrierefreiheit (funktioniert mit Screenreadern und Tastatur), kein eigener Code, und es funktioniert sogar bei abgeschaltetem JS. Lässt sich mit ::details-content stylen und animieren. Ein klassisches Beispiel für ein HTML-Feature, das eine ganze Kategorie von JS-Widgets ersetzt. Hängt mit dem dialog-Element und Popover zusammen.