Wie klappe ich ein Divi-Akkordeon komplett zu?

Standardmäßig ist in Divi immer ein Akkordeon-Element geöffnet. Füge per jQuery-Snippet das Zuklappen aller Elemente hinzu: jQuery('.et_pb_toggle_open').removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close').

DIVI Akkordeon komplett zuklappen

Marius Marzian • 28. Juni 2020 • 3 Min. Lesezeit

Bildschirmfoto 2020 06 28 Um 23.06.29 1024x464 1

SEO-Experte

Marius Marzian

OIT GmbH

Profil ansehen

Das Divi Akkordeon-Modul öffnet standardmäßig den ersten Eintrag beim Laden der Seite. Wenn du möchtest, dass alle Akkordeon-Einträge geschlossen starten, kannst du das mit einem kleinen jQuery-Snippet erreichen.

Alle Akkordeon-Einträge beim Start zuklappen

Füge folgenden Code in Divi → Theme-Optionen → Integration → <body> Abschnitt (ganz unten) oder in ein Code-Modul auf der betreffenden Seite ein:

<script>
jQuery(document).ready(function($) {
  $('.et_pb_accordion .et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
  $('.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_content').css('display', 'none');
});
</script>

Nur auf bestimmten Seiten anwenden

Wenn du das Verhalten nur auf einer bestimmten Seite ändern möchtest, nutze ein Divi Code-Modul auf dieser Seite. Das verhindert, dass der Code das Akkordeon-Verhalten seitenweit beeinflusst.

Alternative: CSS-Methode

Eine reine CSS-Lösung ist leider nicht vollständig möglich, da Divi den ersten Akkordeon-Eintrag serverseitig als „offen“ markiert. Du kannst jedoch die Transition-Animation mit folgendem CSS deaktivieren:

.et_pb_accordion .et_pb_toggle_content {
  display: none !important;
}
.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_content {
  display: block !important;
}

Tipp

Wenn du möchtest, dass ein spezifischer Eintrag standardmäßig geöffnet ist (nicht der erste), füge der entsprechenden CSS-ID im Divi Builder die Klasse et_pb_toggle_open hinzu.

Weitere Anpassungen am Divi Akkordeon

Nur ein Element gleichzeitig offen

Standardmäßig lassen sich mehrere Akkordeon-Einträge gleichzeitig öffnen. Mit einem jQuery-Snippet kannst du erzwingen, dass immer nur ein Eintrag offen ist.

Barrierefreiheit

Divi-Akkordeons verwenden intern bereits aria-Attribute. Trotzdem: teste mit einem Screenreader, ob der Zustand (offen/zu) korrekt kommuniziert wird.

CSS-Alternative zu jQuery

Mit dem nativen <details> und <summary>-HTML-Element kannst du ein Akkordeon ganz ohne JavaScript bauen – einfacher und performanter.

Du brauchst professionelle Unterstützung bei WordPress oder Divi? OIT GmbH aus Osnabrück bietet WordPress-Webdesign und WordPress-Wartung für Ihr Unternehmen.