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>Related Post: Adding JavaScript / jQuery to Divi.
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.
Thanks a lot! Works just fine. :D
This seems to work for me if there are more than one accordion items, but I want to have only one item that starts out not open, opens when clicked, closes when clicked again. With just one item, that item starts out open.
Hi Steve, I'm not sure why this is happening. When I test the code on my own sites with just one accordion item, it starts out closed… Is there any chance you are able to share a link to your site so that I can take a look?
Thank you!! It works great!
I just posted a question yesterday, but it has been deleted… why?
I was asking why are we loosing the closing functionality. Say you open a part of the accordion, you can't close it back, like it normally works. Any way we can add something to the code to bring this back?
Hi Michael, your comment wasn't deleted – just awaiting moderation. I've just approved and answered it. As I say in that reply, you actually can't normally close Divi accordion tabs – they will only close if you open another one. I've come up with a separate solution to let you close all tabs. See here:
https://divibooster.com/make-divi-accordion-module-closable/
Hi,
Works great, although you can't close them back if you click on it. Is there something we can had to the code to bring back this functionality?
Hi Michael, by default Divi doesn't allow you to close an accordion tab, except by opening another. This post explains how to make accordion tabs fully close-able:
https://divibooster.com/make-divi-accordion-module-closable/
works great ! thanks !
Worked perfect on Divi 2.7 thank you very much!
You're welcome, James. Thanks for letting me know :)
Worked when I loaded it in the Body section of ePanel.
THANK YOU!! This saved me a lot of time. I am very grateful.
Thanks, Dan, very helpful.
Thanks Dan, works like a charm and does exactly as you said.
Copied the code into my footer.php and good to go.
Thanks for a great little tip.
thanks – as soon as I copied it into the footer.php, it worked fine. I was looking for somewhere in the Divi Options to put the code and not in the footer function file.
Hi Donna, both should work. This post explains how to add it via the Divi Theme Options, should you wish to do so:
https://divibooster.com/adding-javascript-and-jquery-to-the-divi-theme/
Hi. I followed your instructions, but my accordion is still showing the first item open.
I am working with a child theme, and entered the script on the second box of the integration settings in my ePanel.
Am I missing some important step?
Thank you.
Never mind. It is working as a charm! It was probably cache issues.
Thank you.