Co poskytují elementy details a summary?

Question

Accepted Answer

`

` a `

` vytváří **nativní widget pro rozbalení** — rozšiřitelný/sbalitelný oddíl — **bez JavaScriptu**. Prohlížeč se postará o přepínání, podporu klávesnice a přístupnost za vás. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** je kliknutelný štítek (první child). - Vše za ním je sbalitelný obsah. - Kliknutím na summary se otevře/zavře — nativně přístupné z klávesnice (Enter/Space) a správně ohlášeno čtečkami obrazovky. ## Otevřeno ve výchozím nastavení a detekce stavu ```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 ``` ## Stylizace markeru ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Skutečné případy použití FAQ accordiony, sekce "Zobrazit více", sbalitelné postranní panely, spoiler text, rozšiřitelné řádky tabulky. Před tímto prvkem vyžadoval každý accordion JavaScript plus ARIA zapojení pro přístupnost — nyní to jsou jen dvě sémantické značky. ## Proč je to důležité `

`/`

` vám dávají přístupný, přátelský obsah sbalitelný z klávesnice bez JS a bez ruční ARIA — dokonalý příklad použití platformy. Zahrajte si jej pro FAQ a vzory "Zobrazit více" ještě dříve, než vytvoříte vlastní accordion.