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

Divi Booster

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

126 Comments

  1. Is there a way to begin all closed on mobile & all open on desktop?

    Reply
    • Hey Jeff, sorry I'm only just responding now. There isn't an easy way to do this at the moment. I'll try to come up with a way to do this in the future and let you know if / when I do. The best workaround I can think of at the moment is to create two copies of the accordion, and set one copy to be closed on mobile and disabled (i.e. hidden) on desktop, and the other copy to be open on desktop and disabled on mobile. To avoid maintaining two accordions you could save the main accordion to the library as a global module and then make the copy another instance of that global module. This way the content, etc, would be synchronised between them. You could then disable synchronisation on any fields such as the initial state and visibility that you want to configure separately for each instance. A bit clumsy, but it should work…

      Reply
  2. Do you know how to do the same but on mobile?

    Reply
    • Hey Kevin, as per my reply on your comment on another post it should work on both desktop and mobile. If you haven't already, try clearing the cache on your mobile browser. If that doesn't help, are you able to point me to the accordion you're working on so that I can take a look? Cheers!

      Reply
      • Thanks, it's working :)

        Reply
        • Great to hear, Kevin. Thanks!

          Reply
  3. I will try it soon, because I have a problem with that too. Hope it works

    Reply
    • Yeah, hope it works for you Konrad, but let me know if you have any trouble with it.

      Reply
  4. Is it possible to change which tab that is opened by default? For example, et_pb_accordion_item_3 instead of the first one?

    Reply
    • I solved it my self. :-) Here's the code:

      jQuery(function($){
      $('.et_pb_accordion_item_0').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
      $('.et_pb_accordion_item_4').addClass('et_pb_toggle_open').removeClass('et_pb_toggle_close');
      $('.et_pb_accordion .et_pb_toggle').click(function() {
      $this = $(this);
      setTimeout(function(){
      $this.closest('.et_pb_accordion').removeClass('et_pb_accordion_toggling');
      },700);
      });
      });

      item_0 is tab #1 and item_4 is tab #3. Just change item_4 to whatever tab you want to have open by default.

      Reply
      • Nice work, Victor! Thanks for sharing your solution :)

        Reply
  5. 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
  6. 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
  7. 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
  8. 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

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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