<details>

Description

L’élément <details> crée un widget de divulgation interactif dont le contenu est masqué par défaut. L’utilisateur peut cliquer pour l’ouvrir ou le fermer. Le premier enfant <summary> fournit le libellé visible. Sans <summary>, le navigateur affiche un libellé générique (“Détails”). Aucun JavaScript n’est nécessaire.

Syntaxe

<details>
  <summary>Titre visible</summary>
  <p>Contenu masqué par défaut.</p>
</details>

Exemples

FAQ simple :

<details>
  <summary>Comment installer le projet ?</summary>
  <ol>
    <li>Cloner le dépôt : <code>git clone …</code></li>
    <li>Installer les dépendances : <code>npm install</code></li>
    <li>Lancer le serveur : <code>npm run dev</code></li>
  </ol>
</details>

Ouvert par défaut :

<details open>
  <summary>Paramètres avancés</summary>
  <p>Ces paramètres sont visibles immédiatement.</p>
</details>

Accordéon exclusif (groupe nommé, HTML récent) :

<details name="faq">
  <summary>Question 1</summary>
  <p>Réponse 1</p>
</details>
<details name="faq">
  <summary>Question 2</summary>
  <p>Réponse 2</p>
</details>

Attributs spécifiques

Attribut	Type	Description
open	boolean	Ouvre le widget par défaut au chargement de la page.
name	string	Regroupe plusieurs <details> : un seul peut être ouvert à la fois dans le groupe (accordéon exclusif).

Notes

toggle event : <details> émet un événement toggle quand son état change. Utilisable en JavaScript : details.addEventListener('toggle', () => { … }).

Accessibilité : <details> a nativement role="group" et <summary> a role="button". La navigation clavier (Espace/Entrée pour ouvrir/fermer) est gérée nativement.