Das Divi-Akkordeon lässt sich standardmäßig nicht komplett schließen – es bleibt immer ein Element geöffnet. Mit einem kurzen JavaScript-Snippet und etwas Custom CSS kannst du einen echten Schließenbutton (Minus-Icon) hinzufügen, sodass Nutzer alle Akkordeon-Elemente zuklappen können.
Schritt 1: JavaScript einfügen
Füge folgenden Code unter Divi → Theme Options → Integration ein:
<script>
jQuery(function($){
$('.et_pb_toggle_title').click(function(){
var $toggle = $(this).closest('.et_pb_toggle');
if (!$toggle.hasClass('et_pb_accordion_toggling')) {
var $accordion = $toggle.closest('.et_pb_accordion');
if ($toggle.hasClass('et_pb_toggle_open')) {
$accordion.addClass('et_pb_accordion_toggling');
$toggle.find('.et_pb_toggle_content').slideToggle(700, function() {
$toggle.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close');
});
}
setTimeout(function(){
$accordion.removeClass('et_pb_accordion_toggling');
}, 750);
}
});
});
</script>Schritt 2: CSS für das Minus-Icon
Füge diesen CSS-Code unter Divi → Theme Options → General → Custom CSS ein:
.et_pb_toggle_open .et_pb_toggle_title:before {
display: block !important;
content: "\e04f";
}Ergebnis
Nach dem Einfügen beider Code-Snippets zeigt das Akkordeon bei geöffneten Elementen ein Minus-Icon an. Ein Klick auf ein bereits geöffnetes Element schließt es vollständig.
Gut zu wissen
Diese Lösung funktioniert mit allen Divi-Akkordeon-Modulen und ist kompatibel mit der aktuellen Divi-Version. Das JavaScript nutzt jQuery, das in Divi standardmäßig geladen wird.
Hilfe bei deinem Divi-Projekt?
Wir bei OIT setzen Divi-Projekte professionell um – von Custom-Modulen bis zum kompletten Webdesign. Mehr über unsere Webdesign-Leistungen
Verwandte Artikel
Divi-Akkordeon weiter anpassen
Das Plus/Minus-Icon lässt sich in den Akkordeon-Einstellungen unter „Erweitert → Benutzerdefiniertes CSS" durch ein anderes Icon ersetzen. Nutze Font Awesome-Klassen oder eigne SVGs als Hintergrundbild.
Mit einem kurzen JavaScript-Snippet kannst du ein bestimmtes Akkordeon-Element beim Seitenaufruf automatisch öffnen: document.querySelector('.et_pb_accordion_item_0 .et_pb_toggle_title').click();
Google indexiert Akkordeon-Inhalte auch wenn sie zugeklappt sind. Wichtige Keywords und Inhalte können also bedenkenlos in Akkordeons platziert werden – sie wirken sich positiv auf das Ranking aus.
Hast du eine Frage zu diesem Artikel?
Schreib uns – wir antworten in der Regel innerhalb eines Werktages.