Cosa forniscono gli elementi details e summary?

Question

Accepted Answer

`

` e `

` creano un **widget di disclosure nativo** — una sezione espandibile/collassabile — con **zero JavaScript**. Il browser gestisce il toggle, il supporto della tastiera e l'accessibilità per te. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** è l'etichetta cliccabile (il primo figlio). - Tutto ciò che segue è il contenuto collassabile. - Cliccando il summary si alterna tra aperto/chiuso — accessibile da tastiera nativa (Invio/Spazio) e annunciato correttamente dai lettori di schermo. ## Open by default & detecting state ```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 ``` ## Styling the marker ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Real use cases FAQ accordion, sezioni "mostra di più", barre laterali collassabili, testo spoiler, righe di tabella espandibili. Prima di questo elemento, ogni accordion richiedeva JavaScript più wiring ARIA per l'accessibilità — ora sono solo due tag semantici. ## Perché è importante `

`/`

` ti danno contenuto collassabile accessibile e compatibile con tastiera senza JS e senza ARIA manuale — un perfetto esempio di utilizzo della piattaforma. Usali per FAQ e pattern "mostra di più" prima di costruire un accordion personalizzato.