Exklusives Akkordeon

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

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.

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

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
Demo: Akkordeon mit HTML und CSS

Das exklusive Akkordeon

Unterstützte Browser

  • Chrome: 120. <ph type="x-smartling-placeholder">
  • Edge: 120. <ph type="x-smartling-placeholder">
  • Firefox: 130 <ph type="x-smartling-placeholder">
  • Safari: 17.2 <ph type="x-smartling-placeholder">

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

Hierzu können Sie im Web jetzt ein name-Attribut zu den <details>-Elementen hinzufügen. Bei Verwendung dieses Attributs 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>
<ph type="x-smartling-placeholder">
</ph>
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.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
Demo: Mehrere exklusive Akkordeons mit HTML und CSS

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

Polyfill das exklusive Akkordeon

Mit dem folgenden JavaScript-Code ist es möglich, das Verhalten des exklusiven Akkordeons zu polyfill. 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");
          }
        });
    }
  });
});

Einige ältere Browserversionen lösen dieses toggle-Ereignis nicht aus. In diesen Browsern funktioniert der Polyfill-Code nichts. In Bezug auf Progressive Verbesserung ist dies akzeptables Verhalten.