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 die Akkordeonkomponente. Diese Komponente besteht aus mehreren Offenlegungs-Widgets, die einzeln maximiert oder minimiert werden können, um ihre Inhalte 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

Browser Support

• 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 aus 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: Ausgeblendetes 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. Die Gruppierung erfolgt über das Attribut name, nicht über die DOM-Reihenfolge.

Achtung :Bevor Sie ausschließlich Akkordeons verwenden, sollten Sie überlegen, ob sie für Nutzer hilfreich oder schädlich sind. Mit einem exklusiven Akkordeon wird zwar der visuelle Platz reduziert, den die Inhalte einnehmen, aber Nutzer 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 können Sie das Verhalten der exklusiven Akkordeon-Liste polyfillen. 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. Gemäß dem Prinzip der progressiven Verbesserung ist dies akzeptables Verhalten.