Što pružaju elementi details i summary?

Question

Accepted Answer

`

` i `

` kreiraju **nativni disclosure widget** — proširivi/sažimivi odjeljak — s **nula JavaScripta**. Preglednik upravlja prebacivanjem, podrškom tipkovnice i pristupačnošću umjesto vas. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** je klikljiva oznaka (prvo dijete). - Sve nakon toga je sažimivi sadržaj. - Klikanje na summary prebacuje otvoren/zatvoren status — nativno dostupno putem tipkovnice (Enter/Space) i ispravno najavljeno čitačima zaslona. ## Otvoreno prema zadanoj vrijednosti & detekcija stanja ```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 ``` ## Stiliziranje oznake ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Primjeri iz stvarnog svijeta FAQ akordeoni, odjeljci "prikaži više", sažimive bočne trake, tekstovi sa spoilerima, proširivi redovi tablica. Prije ovog elementa, svaki akordeon je trebao JavaScript plus ARIA povezivanje za pristupačnost — sada su to samo dvije semantičke oznake. ## Zašto je važno `

`/`

` vam daju pristupačan, tipkovnicom prikladan sažimivi sadržaj bez JS-a i bez ručnog ARIA-e — savršen primjer korištenja platforme. Posegnite za njim za FAQ-ove i obrasce "prikaži više" prije nego što gradite prilagođeni akordeon.