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

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.

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 The jQuery Snippet To Your Website

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

<script>
jQuery(document).ready(function(){
    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(){
            
            
            if(jQuery(this).parent().hasClass("et_pb_toggle_open")){
                jQuery(this).parent().removeClass("et_pb_toggle_open");
                jQuery(this).parent().removeClass("et_pb_toggle_close");
                jQuery(this).parent().css("padding", "20px");
                jQuery(this).parent().siblings().removeClass("et_pb_toggle_close");
                jQuery(this).parent().siblings().removeClass("et_pb_toggle_open");
                jQuery(this).parent().siblings().css("padding", "20px");
              	
            }
          jQuery(this).removeClass("all_on");
        
            
        })
        
    }else{
        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");
    }
})
</script>

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.

13

Last updated Feb 1, 2022 @ 2:54 am

Subscribe

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 :)

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

6 Comments

  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

    Reply
    • 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?

      Reply
    • 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.

      Reply

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart