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.

Demo: Akkordeon mit HTML und CSS

Das exklusive Akkordeon

Unterstützte Browser

• 120
• 120
• 130
• 17:2

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>

Demo: Exklusive Akkordeon mit HTML und CSS

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.

Demo: Mehrere exklusive Akkordeons mit HTML und CSS

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.

Achtung :Bevor Sie exklusive Akkordeons verwenden, sollten Sie überlegen, ob sie für Nutzer hilfreich oder schädlich sind. Die Verwendung eines exklusiven Akkordeons reduziert zwar die Menge an visuellem Platz, der Inhalt belegt, aber die Nutzenden müssen möglicherweise viele Elemente öffnen, um Informationen zu finden. Das kann frustrierend für Nutzer sein, die sich mehrere Artikel gleichzeitig ansehen möchten.

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.