Accordéon exclusif

Créez un accordéon exclusif avec plusieurs éléments

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 afficher (ou masquer) leur contenu.

Pour implémenter ce modèle sur le Web, vous combinez plusieurs éléments

et les regroupez généralement visuellement pour indiquer qu'ils appartiennent ensemble.

Démonstration: Accordéon avec HTML et CSS

Accordéon exclusif

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 130.
  • Safari: 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

. Lorsque cet attribut est utilisé, plusieurs éléments
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
du groupe, celui précédemment ouvert se ferme automatiquement.


  Welcome to Learn CSS!
  
…





  Box Model
  
…





  Selectors
  
…
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

, un nouveau groupe logique est créé.

Démo: Plusieurs accordéons exclusifs avec HTML et CSS

Les éléments

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.

Polyfill de l'accordéon exclusif

Avec le code JavaScript suivant, vous pouvez polyfiller le comportement de l'accordéon exclusif. Le code repose sur l'événement toggle de l'élément

.

Lorsqu'un élément

avec un name s'ouvre, le code recherche les autres éléments
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 anciennes versions de navigateurs ne déclenchent pas cet événement toggle. Dans ces navigateurs, le code polyfill ne fait rien. En termes d'amélioration progressive, il s'agit d'un comportement acceptable.