Hvad giver details- og summary-elementerne?

Question

Accepted Answer

`

` og `

` skaber et **native disclosure-widget** — en udvidbar/sammenklappelig sektion — **uden JavaScript**. Browseren håndterer toggle'et, tastaturunderstøttelse og tilgængelighed for dig. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** er det klikbare label (det første barn). - Alt efter det er det sammenklappelige indhold. - Klik på summary toggles åben/lukket — nativt tastaturbar (Enter/Space) og korrekt annonceret af skærmlæsere. ## Åben som standard og registrering af tilstand ```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 af markøren ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Virkelige use cases FAQ-akkordioner, "vis mere"-sektioner, sammenklappebare sidebars, spoiler-tekst, udvidbare tabelrækker. Før dette element havde ethvert akkordion brug for JavaScript plus ARIA-forbindelser for tilgængelighed — nu er det bare to semantiske tags. ## Hvorfor det betyder noget `

`/`

` giver dig tilgængeligt, tastaturvenligt sammenklappelig indhold uden JS og uden manual ARIA — et perfekt eksempel på at bruge platformen. Grib efter det for FAQ'er og "vis mere"-mønstre før du opbygger et brugerdefineret akkordion.