Wat bieden de `
`- en `
`-elementen?

Question

Wat bieden de `

`- en `

`-elementen?

Accepted Answer

`

` en `

` maken een **native disclosure widget** — een uit-/inklappend gedeelte — met **nul JavaScript**. De browser verwerkt de toggle, toetsenbordondersteuning en toegankelijkheid voor je. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** is het aanklikbare label (het eerste kind). - Alles daarna is de inklapbare inhoud. - Op het samenvatting klikken schakelt open/dicht in — natieftoetsenbordbereikt (Enter/Space) en correct aangekondigd door schermlezerproducten. ## Standaard geopend en status detecteren ```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 ``` ## De marker opmaken ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Real use cases VAK-accordeons, 'meer weergeven'-secties, inklappen zijbalken, spoilertekst, uit te breiden tabelrijen. Voor dit element had elke accordeon JavaScript plus ARIA-bedrading nodig voor toegankelijkheid — nu zijn het twee semantische tags. ## Waarom het belangrijk is `

`/`

` geeft je toegankelijke, toetsenbordvriendelijke inklapbare inhoud zonder JS en geen handmatige ARIA — een perfect voorbeeld van het gebruik van het platform. Zoek het op voor FAQ's en 'meer weergeven'-patronen voordat je een aangepaste accordeon bouwt.