Exklusives Akkordeon

Erstelle ein exklusives Akkordeon mit mehreren <details>-Elementen, die dieselbe name haben.

Bramus

Das Akkordeon

Ein gängiges UI-Muster im Web ist eine Akkordeonkomponente. Dies ist eine Komponente, die aus mehreren Offenlegungs-Widgets besteht, die einzeln maximiert (oder minimiert) werden können, um ihren Inhalt ein- oder auszublenden.

Um dieses Muster im Web zu implementieren, kombinierst du einige <details>-Elemente und gruppierst sie in der Regel visuell, um anzuzeigen, dass sie zusammengehören.

Demo: Akkordeon mit HTML und CSS

Das exklusive Akkordeon

Unterstützte Browser

  • 120
  • 120
  • x
  • 17.2

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

Um dies im Web zu erreichen, können Sie den <details>-Elementen jetzt ein name-Attribut hinzufügen. Wenn dieses Attribut verwendet wird, bilden mehrere <details>-Elemente mit demselben name-Wert eine semantische Gruppe und sie verhalten sich wie ein exklusives Akkordeon. Wenn du eines der <details>-Elemente aus der Gruppe öffnest, 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>
Demo: Exklusives Akkordeon mit HTML und CSS

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

Demo: Mehrere exklusive Akkordeons mit HTML und CSS

Beachte, dass die <details>-Elemente, die Teil eines exklusiven Akkordeons sind, nicht unbedingt gleichgeordnete Elemente sein müssen. Sie können über das Dokument verteilt sein. Diese werden durch das Attribut name gruppiert, nicht durch ihre DOM-Reihenfolge.

Polyfill für das exklusive Akkordeon

Mit dem folgenden JavaScript-Code ist es möglich, das Verhalten des exklusiven Akkordeons zu füllen. Der Code basiert auf dem toggle-Ereignis des <details>-Elements.

Wenn ein <details>-Element mit einem name-Element geöffnet wird, sucht der Code nach den anderen offenen <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");
          }
        });
    }
  });
});

Bei einigen älteren Browserversionen wird dieses toggle-Ereignis nicht ausgelöst. In diesen Browsern bewirkt der Polyfill-Code nichts. Im Hinblick auf Progressive Enhancement ist dies akzeptabel.