Kaj zagotavljata elementa details in summary?

Question

Accepted Answer

`

` in `

` ustvarita **nativni razkritni gradnik** — razširljiv/skljiv razdelek — **brez JavaScripta**. Brskalnik upravlja preklop, podporo tipkovnice in dostopnost za vas. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** je klikljiva oznaka (prvi otrok). - Vse po njej je skljiva vsebina. - Klik na summary preklopi odprt/zaprt — nativno dostopen s tipkovnico (Enter/Space) in pravilno objavljen s čitalniki zaslona. ## Odprto po privzetku in zaznavanje 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 ``` ## Oblikovanje označevalca ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Pravi primeri uporabe Akordioni FAQ, oddelki "prikaži več", skljivi stranski stolpci, besedilo s spoilerjema, razširljive vrstice tabel. Prej je vsak akordion potreboval JavaScript in ročno žičenje ARIA za dostopnost — zdaj sta to le dva semantična elementa. ## Zakaj je to pomembno `

`/`

` vam dajeta dostopno, tipkovnico-prijazno skljivo vsebino brez JS in brez ročnega ARIA — savršen primer uporabe platforme. Za FAQ in vzorce "prikaži več" se nanj zatecite pred gradnjo prilagojenega akordiona.