How To Set The Toggle Or Accordion Module Default State Open Or Closed Tutorial by Pee Aye Creative

How To Set The Toggle Or Accordion Module Default State Open Or Closed

Nelson Miller Pee Aye Creative
In this tutorial I will show you how to set the default state of the Divi Accordion module open or closed when the page loads.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Set The Divi Toggle Module State

The Divi Toggle module can easily be set to open or closed with a setting. This setting is easy to find in the Toggle settings>Content tab>State toggle. Just select either Open or Close as your desired option, and this is how it will show when the page loads.

set the default state of the Divi Toggle module

Set The Divi Accordion Module State

If only it was this easy for the Divi accordion module as it is for the Divi Toggle module. There is currently no setting for this in the Accordion module. The worst part is that the first accordion item is actually open by default. 

the Divi Accordion module shows the first item open by default on page load

In my opinion, this is not good, it looks especially bad if you have several columns or sections of accordions. So the only solution is to use jQuery. This is a difficult problem to solve, and many other Divi bloggers have tried and failed. So we came up with this solution that works great, but it does require a larger snippet of code than normal.

1. Add The CSS Class To The Accordion Module

The first step is to give the Accordion module a custom class. This is used so that we can target this specific Accordion module with the jQuery code. Go to the Accordion module settings to the Advanced tab and open the CSS ID & Classes toggle and place the custom class “pa-accordion” into the CSS Class input field.

add a CSS class for setting the default Divi accordion module state to closed

2. Add The jQuery Snippet To Your Website

The last step is to add the jQuery code snippet to your Divi website that will create the functionality of closing the Divi Accordion module by default.

Where To Paste The jQuery Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

    var setState = "close";
    if(setState == "open"){
        jQuery(".pa-accordion .et_pb_toggle").removeClass("et_pb_toggle_close");
        jQuery(".pa-accordion .et_pb_toggle").addClass("et_pb_toggle_open");
        jQuery(".et_pb_toggle_open .et_pb_toggle_content").css("display", "block");
        jQuery(".et_pb_toggle_open .et_pb_toggle_title").addClass("all_on");
        jQuery(".all_on").on("click", function(){
                jQuery(this).parent().css("padding", "20px");
                jQuery(this).parent().siblings().css("padding", "20px");
        jQuery(".pa-accordion .et_pb_toggle").removeClass("et_pb_toggle_open");
        jQuery(".pa-accordion .et_pb_toggle").addClass("et_pb_toggle_close");
        jQuery(".et_pb_toggle_close .et_pb_toggle_content").css("display", "none");

In the above code, there is a variable called setState which is set to “close” in our snippet. You can change this text to “open” if you want. If the value is set to “close” then the code will close all the accordions on page load. If the value is set to “open” then the code will open all the accordions on page load.

Last updated [last-modified %date%]


Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy


  1. Renaud Destermes

    Thank for this tutorial. I don’t know why, but it dosen’t work on my website, coul’d you have a quick look please (in the ham menu)? When one is open, second donc close the first… Thanks in advance

    • Hemant Gaba

      Hey Renaud,

      Could you please share the URL of the page where the accordion is present and please let me know what state you want to set to default?

    • Hemant Gaba

      Hey Ammie,

      I have checked the URL you provided and as I could see, your website is developed on Elementor and this snippet is for the Divi-developed websites.

    • Hemant Gaba

      Hi Matt!

      I’m not able to see the script in the page source code. Did you remove it?

  2. Yen

    Hi Nelson!
    Thanks for the tutorial.
    Is there any way that I can open a specific Accordion by default?
    Thanks in advance!

  3. Carol Tomalty

    This is the information that I need, but when I look at the Accordion Settings in the module, there is no ‘State’ – Did they remove that option or am I missing something? I’m using Divi 4.22.2. I seem to recall that I always had to use a work-around, but I hopes that wasn’t the case when I saw your article.

    • Andi

      same to me, i also have no Toggle Stat in my Divi (newest Version 4.23)

    • Hemant Gaba

      Hi Carol!

      It seems you’re using the accordion module. The State option is in the Toggle module. To change the Accordion module, please use the script provided in the guide above.

  4. Ivo

    Hi. Script works great, but once I open my accordion, it won’t close again. Am I missing something, or can it not do that?

    • Nelson Lee Miller (aka The Divi Teacher)

      The way an accordion works, it always has one toggle open. This tutorial is only about setting the default state of that first toggle to closed instead of open.

  5. Rick Elrod

    Do you know how to have the according close when you click on it again?

    • Hemant Gaba

      Hi Rick!

      We will consider the request and apply it to the customization in the future.


Submit a Comment

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

Recent Posts


Your Cart