Accordéon exclusif

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

Bramus

L'accordéon

Un modèle d'interface utilisateur courant sur le Web est un composant en accordéon. Ce composant est constitué de plusieurs widgets d'information qui peuvent être développés (ou réduits) individuellement pour afficher (ou masquer) leur contenu.

Pour implémenter ce modèle sur le Web, vous devez combiner quelques éléments <details> et les regrouper visuellement pour indiquer qu'ils vont ensemble.

L'accordéon exclusif

L'accordéon exclusif est une variante du modèle en accordéon, dans lequel un seul des widgets d'information peut être ouvert en même temps.

Pour ce faire sur le Web, vous pouvez désormais ajouter 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, l'élément précédemment ouvert 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 contenir plusieurs accordéons exclusifs. Chaque fois que vous utilisez une nouvelle valeur name sur un élément <details>, un groupe logique est créé.

Notez que les éléments <details> qui font partie d'un accordéon exclusif ne doivent pas nécessairement être des frères et sœurs. Ils peuvent être dispersés dans le document. C'est l'attribut name qui les regroupe, et non dans l'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 ayant 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. Ce comportement est acceptable en termes d'amélioration progressive.