Que fournissent les éléments details et summary ?

Question

Accepted Answer

`

` et `

` créent un **widget de divulgation natif** — une section dépliable/repliable — avec **zéro JavaScript**. Le navigateur gère le basculement, le support du clavier et l'accessibilité pour vous. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** est l'étiquette cliquable (le premier enfant). - Tout ce qui suit est le contenu repliable. - Cliquer sur le résumé bascule l'état ouvert/fermé — naturellement accessible au clavier (Entrée/Espace) et annoncé correctement par les lecteurs d'écran. ## Ouvert par défaut et détection de l'état ```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 ``` ## Styliser le marqueur ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Cas d'usage réels Accordéons FAQ, sections « afficher plus », barres latérales repliables, texte spoiler, lignes de tableau dépliables. Avant cet élément, chaque accordéon avait besoin de JavaScript plus du câblage ARIA pour l'accessibilité — maintenant ce sont deux balises sémantiques. ## Pourquoi c'est important `

`/`

` vous donnent du contenu repliable accessible et convivial au clavier sans JS et sans ARIA manuel — un parfait exemple d'utilisation de la plateforme. Utilisez-le pour les FAQ et les motifs « afficher plus » avant de créer un accordéon personnalisé.