DIVI: Add a close button (minus) to the accordion

Bildschirmfoto 2020 07 20 um 20.51.17 1
Contents

    To activate the possibility of closing in an accordion in DIVI you need the following code:

    1. Java-Script, to be inserted under Divi > Theme Options > Integration
    <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>

    2. insert CSS code under Divi > Theme Options > General > Custom CSS

    .et_pb_toggle_open .et_pb_toggle_title:before {
    	display: block !important;
    	content: "\e04f";
    }

    The result should look like this:

    Dieser Beitrag ist auch verfügbar auf: Deutsch (German)

    Updated on 1. April 2024
    Was this article helpful?

    Leave a Reply

    Your email address will not be published. Required fields are marked *