Ce oferă elementele `
` și `
`?

Question

Ce oferă elementele `

` și `

`?

Accepted Answer

`

` și `

` creează un **widget de divulgare nativ** — o secțiune extinsibilă/restrângătoare — cu **zero JavaScript**. Browserul gestionează comutarea, suportul tastaturii și accesibilitatea pentru tine. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** este eticheta pe care se poate face clic (primul copil). - Tot ceea ce urmează este conținutul restrângător. - Făcând clic pe rezumat, comută deschis/închis — accesibil nativ cu tastatura (Enter/Space) și anunțat corect de cititorii de ecran. ## Deschis implicit și detectarea stării ```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 ``` ## Stilizarea marcatorului ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Cazuri de utilizare reale Acordeoane FAQ, secțiuni "arată mai multe", bare laterale restrângătoare, text spoiler, rânduri de tabel extensibile. Înainte de acest element, fiecare acordeon necesita JavaScript plus cablaj ARIA pentru accesibilitate — acum sunt doar două etichete semantice. ## De ce conteaza `

`/`

` vă oferă conținut restrângător accesibil și ușor de utilizat cu tastatura, fără JS și fără ARIA manual — un exemplu perfect de utilizare a platformei. Apelați-vă la el pentru FAQ și modele "arată mai multe" înainte de a construi un acordeon personalizat.