Was bieten die Elemente details und summary?

Question

Accepted Answer

`

` und `

` erstellen ein **natives Disclosure-Widget** — einen erweiterbaren/ausklappbaren Bereich — **ohne JavaScript**. Der Browser übernimmt das Umschalten, Tastaturunterstützung und Barrierefreiheit für Sie. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** ist das anklickbare Label (das erste Kind). - Alles danach ist der ausklappbare Inhalt. - Das Klicken auf summary schaltet zwischen offen/geschlossen um — nativ tastaturzugänglich (Enter/Space) und von Bildschirmleseprogrammen korrekt angekündigt. ## Warum es wichtig ist Offen standardmäßig und Zustandserkennung ```html

FAQ item

Answer...

``` ```js const d = document.querySelector("details"); d.open; // boolean: is it open? d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close ``` ## Styling des Markers ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Echte Use Cases FAQ-Akkordeons, "Mehr anzeigen"-Abschnitte, ausklappbare Seitenleisten, Spoiler-Text, erweiterbare Tabellenzeilen. Vor diesem Element benötigte jedes Akkordeon JavaScript plus ARIA-Verkabelung für Barrierefreiheit — jetzt sind es nur zwei semantische Tags. `

`/`

` bieten Ihnen zugänglichen, tastaturfreundlichen ausklappbaren Inhalt ohne JS und ohne manuelles ARIA — ein perfektes Beispiel für die Nutzung der Plattform. Greifen Sie danach für FAQs und "Mehr anzeigen"-Muster, bevor Sie ein benutzerdefiniertes Akkordeon erstellen.