Divi Accordion Customizations

, ,

So when it comes to Divi Accordion I didn’t like how the first one was always open and there wasn’t a way to close one without opening up another one.  So I came across the following code to accomplish what I was looking for.

Here is the Javascript needed to give open/close capabilities as well as closed by default.

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);
    }
  });

    $('.et_pb_accordion .et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');

    $('.et_pb_accordion .et_pb_toggle').click(function() {
      $this = $(this);
      setTimeout(function(){
         $this.closest('.et_pb_accordion').removeClass('et_pb_accordion_toggling');
      },700);
    });

});

 

Here is the CSS that puts a close icon in the same spot that the open icon is to the right of the accordion.

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

 

Skills

Posted on

February 7, 2020

Submit a Comment

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