Exklusives Akkordeon

Erstellen Sie eine exklusive Akkordeonstruktur mit mehreren <details>-Elementen mit derselben name.

Bramus

Das Akkordeon

Ein gängiges UI-Muster im Web ist das Akkordeon-Element. Diese Komponente besteht aus mehreren Offenlegungs-Widgets, die einzeln maximiert (oder minimiert) werden können, um den Inhalt ein- oder auszublenden.

Wenn Sie dieses Muster im Web implementieren, kombinieren Sie einige <details>-Elemente und gruppieren sie in der Regel visuell, um anzuzeigen, dass sie zusammengehören.

Das exklusive Akkordeon

Eine Variante des Akkordeon-Musters ist das exklusive Akkordeon, bei dem jeweils nur eines der Ausblendungs-Widgets geöffnet werden kann.

Wenn Sie ein exklusives Akkordeon im Web erstellen möchten, fügen Sie den <details>-Elementen das Attribut name hinzu. Wenn dieses Attribut verwendet wird, bilden mehrere <details>-Elemente mit demselben name-Wert eine semantische Gruppe und verhalten sich wie ein exklusives Akkordeon. Wenn Sie eines der <details>-Elemente der Gruppe öffnen, wird das zuvor geöffnete Element automatisch geschlossen.

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

Eine Seite kann mehrere exklusive Akkordeons haben. Jedes Mal, wenn Sie einen neuen name-Wert für ein <details>-Element verwenden, wird eine neue logische Gruppe erstellt.

Die <details>-Elemente, die zu einem ausschließenden Akkordeon gehören, müssen nicht unbedingt Geschwister sein. Sie können im Dokument verteilt sein. Es ist das Attribut name, das sie gruppiert, nicht ihre DOM-Reihenfolge.

Polyfill für das exklusive Akkordeon

Mit dem folgenden JavaScript-Code ist es möglich, das Verhalten des exklusiven Akkordeons zu polyfill. Der Code verwendet das Ereignis toggle des Elements <details>.

Wenn ein <details>-Element mit einem name geöffnet wird, sucht der Code nach den anderen geöffneten <details>-Elementen mit demselben Wert für das name-Attribut und schließt sie.

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

In einigen älteren Browserversionen wird dieses toggle-Ereignis nicht ausgelöst. In diesen Browsern wird der polyfill-Code nicht ausgeführt. Im Hinblick auf die progressive Verbesserung ist dies akzeptables Verhalten.