Accordéon exclusif

Créez un accordéon exclusif avec plusieurs éléments <details> ayant le même name.

Bramus

L'accordéon

Un composant accordéon est un modèle d'UI courant sur le Web. Il s'agit d'un composant composé de plusieurs widgets de divulgation qui peuvent être développés (ou réduits) individuellement pour révéler (ou masquer) leur contenu.

Pour implémenter ce modèle sur le Web, vous combinez plusieurs éléments <details> et les regroupez généralement visuellement pour indiquer qu'ils appartiennent ensemble.

Démonstration: Accordéon avec HTML et CSS

Accordéon exclusif

Navigateurs pris en charge

• 120
• 120
• 130
• 17.2

Le accordéon exclusif est une variante du modèle d'accordéon. Dans ce cas, un seul des widgets de divulgation peut être ouvert à la fois.

Pour créer un accordéon exclusif sur le Web, ajoutez un attribut name aux éléments <details>. Lorsque cet attribut est utilisé, plusieurs éléments <details> ayant la même valeur name forment un groupe sémantique et se comportent comme un accordéon exclusif. Lorsque vous ouvrez l'un des éléments <details> du groupe, celui qui était ouvert précédemment se ferme automatiquement.

<details name="learn-css">
  <summary>Welcome to Learn CSS!</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Box Model</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Selectors</summary>
  <p>…</p>
</details>

Démo: Accordéon exclusif en HTML et CSS

Une page peut comporter plusieurs accordéons exclusifs. Chaque fois que vous utilisez une nouvelle valeur name sur un élément <details>, un nouveau groupe logique est créé.

Démonstration: plusieurs accordéons exclusifs avec HTML et CSS

Les éléments <details> qui font partie d'un accordéon exclusif n'ont pas nécessairement besoin d'être frères et sœurs. Ils peuvent être dispersés dans le document. C'est l'attribut name qui les regroupe, et non leur ordre DOM.

Attention :Avant d'utiliser des accordéons exclusifs, réfléchissez à leur utilité ou à leur nocivité pour les utilisateurs. Bien que l'utilisation d'un accordéon exclusif réduise la quantité d'espace visuel occupé par le contenu, les utilisateurs peuvent être amenés à ouvrir de nombreux éléments pour trouver des informations. Cela peut frustrer les utilisateurs qui souhaitent consulter plusieurs articles en même temps.

Polyremplir l'accordéon exclusif

Le code JavaScript suivant permet d'émuler le comportement de l'accordéon exclusif. Le code repose sur l'événement toggle de l'élément <details>.

Lorsqu'un élément <details> avec un name s'ouvre, le code recherche les autres éléments <details> ouverts avec la même valeur pour l'attribut name et les ferme.

document.querySelectorAll("details[name]").forEach(($details) => {
  $details.addEventListener("toggle", (e) => {
    const name = $details.getAttribute("name");

    if (e.newState == "open") {
      document
        .querySelectorAll(`details[name=${name}][open]`)
        .forEach(($openDetails) => {
          if (!($openDetails === $details)) {
            $openDetails.removeAttribute("open");
          }
        });
    }
  });
});

Certaines versions plus anciennes des navigateurs ne déclenchent pas cet événement toggle. Dans ces navigateurs, le code polyfill ne fonctionne pas. En termes d'amélioration progressive, ce comportement est acceptable.