Make Divi Accordions Closed by Default

The default behavior of the Divi Theme's accordion module is to show the first item of the accordion as open. If you'd like to have all accordion items to start in the closed state by default, you can do so by adding the following jQuery code to Divi:

<script>
jQuery(function($){
    $('.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);
    });
});
</script>

Changing the Accordion Initial State with Divi Booster

Divi Booster adds an option to set the initial state of individual accordions into the Accordion Module settings. You'll find it at:

  • Divi Booster 2.9.5 upwards: "Accordion Module Settings > Design > Toggle > Initial State"
  • Divi Booster 2.8.4 – 2.9.4: "Accordion Module Settings > Design > Title Text > Initial State"

You can set the initial state of individual accordions to one of "Default", "All Closed" and "All Open".

It is also possible to make all accordions on the site start closed using the older option found under "Modules > Accordion" on the Divi Booster settings page.

This post may contain referral links which may earn a commission for this site

Hundreds of new features for Divi
in one easy-to-use plugin

115 Comments

  1. This code doesn't seem to work as of today.

    Reply
    • Hi Sara, the code is still working on my test site with the latest Divi (4.8.2), so I'm not sure why it isn't working for you. Is there any chance you're able to share a link to an example page, either here or via the contact form? Thanks!

      Reply
  2. This is awesome. I was looking for the same. Thanks for sharing.
    But i guess Divi should give a option as Default. It would be much more easy.

    Reply
    • You're welcome Asif 🙂

      Reply
  3. Thanks for the help. It was great.
    I have a need and I hope you can help me (and hopefully others)

    Reply
    • You're welcome, Adrian. If there is something I can help with please feel free to ask her or via the contact form. Thanks!

      Reply
    • De nada, Julián. Yeah, the combination of this post and the one you link to work well together to make the accordion behave as expected. Thanks!

      Reply
  4. Hey Dan, is there a way to remove the pointer effect that happens when you hover over the title of an accordion box? I have all the boxes set to stay open so it doesn't make much sense to show a pointer when the title is hovered over.

    Reply

Leave a Reply to dan Cancel reply

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