Hva gir `
`- og `
`-elementene?

Question

Hva gir `

`- og `

`-elementene?

Accepted Answer

`

` og `

` oppretter en **native disclosure widget** — en utvidbar/sammenkollapsbar del — med **null JavaScript**. Nettleseren håndterer vekslingen, tastaturstøtte og tilgjengelighet for deg. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** er etiketten som kan klikkes på (det første underordnede elementet). - Alt etter det er det sammenfoldbaren innholdet. - Hvis du klikker på sammendraget, toggles det åpent/lukket — innebygd tastaturaksessibelt (Enter/Space) og kunngjort riktig av skjermlesere. ## Åpen som standard og oppdagelse av 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 av markøren ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Virkelige brukstilfeller FAQ-accordions, "vis mer"-seksjoner, sammenklappbare sidestolper, spoilertekst, utvidbare tabelrader. Før dette elementet trengte hver accordion JavaScript pluss ARIA-ledning for tilgjengelighet — nå er det bare to semantiske tagger. ## Hvorfor det er viktig `

`/`

` gir deg tilgjengelig, tastaturvennlig sammenfoldebart innhold uten JS og ingen manuell ARIA — et perfekt eksempel på bruk av plattformen. Bruk det til FAQ-er og "vis mer"-mønstre før du bygger en egendefinert accordion.