WordPress Plugin Lightweight Accordion: Einstellen, dass immer nur ein Accordion geöffnet ist

Das WordPress-Plugin Lightweight Accordion ist eine schlanke Möglichkeit, Accordions in Beiträge oder Seiten einzubinden.

Einziger (möglicher) Nachteil: Wenn man mehrere Accordions auf einer Seite hat, bleiben alle geöffneten Accordions geöffnet, wenn man weitere Accordions öffnet.

Das kann zwar auch mal sinnvoll bzw. erwünscht sein – manchmal ist es aber auch schöner, wenn immer nur ein Accordion als geöffnet dargestellt wird und das Öffnen eines Accordions ein bereits vorher geöffnetes Accordion schließt.

Dieses Verhalten kann man erreichen, indem man eine KI damit beauftragt, ein Javascript zu programmieren, das genau das macht:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Alle Accordions auf der Seite finden
  const accordions = document.querySelectorAll('.lightweight-accordion details');

  accordions.forEach(function(accordion) {
    accordion.addEventListener('toggle', function() {
      if (accordion.open) {
        // Alle anderen Accordions schließen
        accordions.forEach(function(otherAccordion) {
          if (otherAccordion !== accordion) {
            otherAccordion.removeAttribute('open');
          }
        });
      }
    });
  });
});
</script>

Dieses Script baut man dann auf der Seite ein, auf der sich die Accordions befinden – fertig!

Es gibt viele verschiedene Methoden, eigenes Javascript in WordPress einzubinden – bei dem von mir verwendeten Theme GeneratePress geht das ganz einfach mit einem Hook-Element, das auf den betreffenden Seiten im Footer eingebunden wird.