DIVI: Einen Schließenbutton (minus) zum Akkordeon hinzufügen

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.

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

→ Jetzt kurz melden

Verwandte Artikel

• Divi Update
• PageSpeed
• KI Gateway