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.

Um dieses Muster im Web zu 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 aus der Gruppe öffnen, wird das zuvor geöffnete Element automatisch geschlossen.

<details name="learn>-cs<s">
  summaryWelcome to <Learn CS>S!/<s>u<mm>a<ry
  p…/>p<
/details
details name=&>quo<t;learn>-css"<;
  summ>ary<B>o<x >M<odel/sum>m<ary
  p…/p
/details
deta>ils< name=&>quot;lear<n-css&qu>ot;<
> < s>u<mmarySel>ectors/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. Die Gruppierung erfolgt über das Attribut name, nicht über die DOM-Reihenfolge.

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}][o>pen]`)
        .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.