Vad tillhandahåller details- och summary-elementen?

Question

Accepted Answer

`

` och `

` skapar en **native disclosure widget** — en utökningsbar/kollapsibel sektion — **utan JavaScript**. Webbläsaren hanterar växling, tangentbordsstöd och tillgänglighet åt dig. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** är den klickbara etiketten (det första barnet). - Allt efter det är det kollapsibla innehållet. - Att klicka på summary växlar mellan öppet/stängt — nativt tangentbordsåtkomligt (Enter/Space) och korrekt annonserat av skärmläsare. ## Öppet som standard & upptäcka tillstånd ```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 ``` ## Formatering av markören ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Verklig användningsfall FAQ-dragspel, "visa mer"-sektioner, kollapsibla sidofält, spoiler-text, utökningsbara tabellrader. Tidigare krävde varje dragspel JavaScript plus ARIA-koppling för tillgänglighet — nu är det två semantiska taggar. ## Varför det är viktigt `

`/`

` ger dig tillgängligt, tangentbordsvänligt kollapsibelt innehål utan JS och utan manuell ARIA — ett perfekt exempel på att använda plattformen. Använd det för FAQ och "visa mer"-mönster innan du bygger ett anpassat dragspel.