Open Or Closed On Page Load
In this guide, I am going to talk about how you can open or close all toggles and accordions on page load. When it comes to the Toggle Module, you can set whether to expand/close it by going to the toggle module settings. But for the Accordion, you do not have any option by default to open/close all the accordions, so for that you will learn how you can do that with the help of jQuery Snippet. In this tutorial, I will show you how to set the default state of the Divi Accordion module to open or closed using jQuery.
▶️ Please watch the video above to get all the exciting details! 👆
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 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.
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.
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.
<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.
Hi, how in the world do you auto-close an Accordian when the Accordians are all in different rows & columns? They have to be designed like this, but the auto-close doesn’t work when a new Accordion is opened in different rows & columns. Thanks!
Hi Doren,
Right, each Divi module works completely independently of each other. I don’t have a solution for that scenario, sorry!
Bummer, but completely understandable. Thanks!
ANother hack to do this is to add a first accordion item, then it its advanced tab under main element add display: none;
This is the information that I need, but when I look at the Accordion Settings in the module, there is no ‘State’ – https://tinyurl.com/2bveusy7. 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.
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.
same to me, i also have no Toggle Stat in my Divi (newest Version 4.23)