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.

    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')) {
        $toggle.find('.et_pb_toggle_content').slideToggle(700, function() { 
      }, 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);



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";



Posted on

February 7, 2020

Submit a Comment

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