Accordéon

Composant natif permettant d'afficher ou masquer des sections de contenu, sans JavaScript.

1. Démonstration

Pourquoi utiliser les balises natives ?

L'utilisation des balises <details> et <summary> garantit une accessibilité parfaite au clavier et aux lecteurs d'écran, sans avoir à gérer des attributs ARIA complexes ou du JavaScript.

Comment fonctionne l'éco-conception ici ?

Ce composant pèse 0 Ko de JavaScript. Le comportement exclusif (fermer un panneau quand on en ouvre un autre) est géré par le navigateur grâce à l'attribut HTML name.

Ce composant est-il personnalisable ?

Absolument ! Le CSS fourni est minimaliste et s'adaptera facilement aux variables de thème (clair/sombre) de votre site.

2. Accessibilité (Gérée par le navigateur)

En utilisant les balises sémantiques, le navigateur fait tout le travail :

Interaction	Comportement natif
`Tab`	Place le focus sur l'en-tête de l'accordéon (`summary`). L'indicateur visuel est géré via `:focus-visible`.
`Entrée` / `Espace`	Bascule l'état ouvert/fermé de l'accordéon.
Lecteur d'écran	Annonce nativement le rôle de bouton et son état (développé/réduit).

3. Code source

HTML

L'attribut name="mon-groupe" (optionnel) permet d'avoir un comportement « accordéon exclusif » (un seul panneau ouvert à la fois). Retirez cet attribut si vous souhaitez que plusieurs panneaux puissent être ouverts simultanément.

<div class="accordion-group">
  <details name="faq-accordion">
    <summary>Titre de la première section</summary>
    <div class="accordion-content">
      <p>Contenu détaillé de la première section...</p>
    </div>
  </details>

  <details name="faq-accordion">
    <summary>Titre de la seconde section</summary>
    <div class="accordion-content">
      <p>Contenu détaillé de la seconde section...</p>
    </div>
  </details>
</div>