Exclusieve accordeon

Creëer een exclusieve accordeon met meerdere <details> elementen die dezelfde name hebben.

Bramus

De accordeon

Een veelgebruikt UI-patroon op internet is een accordeoncomponent. Dit is een component die bestaat uit verschillende openbaarmakingswidgets die afzonderlijk kunnen worden uitgevouwen (of samengevouwen) om de inhoud ervan zichtbaar te maken (of te verbergen).

Om dit patroon op internet te implementeren, combineert u een paar <details> -elementen en groepeert u deze doorgaans visueel om aan te geven dat ze bij elkaar horen.

De exclusieve accordeon

Een variatie op het accordeonpatroon is de exclusieve accordeon , waarbij slechts één van de onthullingswidgets tegelijkertijd kan worden geopend.

Om een ​​exclusieve accordeon op internet te maken, voegt u een name toe aan de <details> -elementen. Wanneer dit attribuut wordt gebruikt, vormen meerdere <details> -elementen met dezelfde name een semantische groep en gedragen ze zich als een exclusieve accordeon. Wanneer u een van de <details> -elementen uit de groep opent, wordt het eerder geopende element automatisch gesloten.

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

Een pagina kan meerdere exclusieve accordeons bevatten. Telkens wanneer u een nieuwe name voor een <details> -element gebruikt, wordt er een nieuwe logische groep gemaakt.

De <details> elementen die deel uitmaken van een exclusieve accordeon hoeven niet noodzakelijkerwijs broers en zussen te zijn. Ze kunnen over het document verspreid zijn. Het is het name dat ze groepeert, niet hun DOM-volgorde.

Polyfill de exclusieve accordeon

Met het volgende JavaScript is het mogelijk om het gedrag van de exclusieve accordeon te polyfillen. De code is afhankelijk van de toggle -gebeurtenis van het <details> -element.

Wanneer een <details> -element met een name wordt geopend, vindt de code de andere open <details> -elementen met dezelfde waarde voor het name attribuut en sluit deze.

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");
          }
        });
    }
  });
});

Sommige oudere versies van browsers activeren deze toggle niet. In die browsers doet de polyfill-code niets. In termen van progressieve verbetering is dit acceptabel gedrag.