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.

Accordéon exclusif

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>

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éé.

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.

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.