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.
Verwandte Artikel
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.
Hast du eine Frage zu diesem Artikel?
Schreib uns – wir antworten in der Regel innerhalb eines Werktages.