<details>
Afficher ou masquer du contenu, sans une ligne de JavaScript
<details> + <summary> — Le panneau dépliable
La balise <details> crée un panneau dépliable (disclosure widget). Le <summary> est l'intitulé toujours visible. Le reste du contenu est masqué par défaut et apparaît quand l'utilisateur ouvre le panneau. Aucun JavaScript requis.
Quand l'utiliser
Tu veux afficher une FAQ, des notes complémentaires, des paramètres avancés ou tout contenu secondaire que l'utilisateur peut choisir de voir ou non.
Ce que tu gagnes
Accessibilité : le navigateur gère le focus, l'état ouvert/fermé et l'annonce aux lecteurs d'écran nativement. Pas besoin de réinventer un disclosure avec ARIA.
Exemple de code
<details>
<summary>How do I reset my password?</summary>
<p>Go to the login page and click "Forgot password". You will receive an email with a reset link.</p>
</details>
<details open>
<summary>What payment methods do you accept?</summary>
<p>We accept credit cards, PayPal, and bank transfers.</p>
</details>Pour aller plus loin
- ARIA, ce poison de l'accessibilité web — pourquoi les éléments natifs sont préférable à ARIA
- WHATWG —
<details> - W3C — ARIA Disclosure Pattern
- MDN —
<details> - MDN —
<summary>