Make Divi Accordions Closed by Default

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

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.

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

113 Comments

  1. 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
  2. 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
  3. 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

Submit a Comment

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