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.
Hi Dan –
Thanks so much for this!
I am running into an issue on one of my pages where I'm using a PDF embedder in my accordions and they are refusing to resize. None of the fixes I've found thus far have worked, including the suggested fix by the plug-in developer –
window.dispatchEvent(new Event('resize'));
Would you be able to help? The page in question lives here currently: http://test.alexandriamasters.com/team-records/
Hi Stephanie, it looks like the problem is that the PDFs aren't being resized when they are in a closed accordion toggle. I had a play around and I think this should fix it:
https://divibooster.com/fix-pdf-embedder-not-resized-in-closed-accordions/
Let me know if that doesn't help. Thanks!
you're amazing, worked like a charm. thanks!
Great! Thanks for letting me know, Stephanie :)
Hi I am looking to make it so all toggles are closed on start and then to open one then when I open the second it closes that first one opened. When I include your code it starts with all closed then I am able to open one. But then all others will not open and I cannot close the first one. Plus it does this to all of the accordions on my site not just this one on this page. I tried to add a class id to the module and then to the script. But it did not work. Any suggestions? Thanks so much.
Hi Amber, are you still having problems with this? I just checked your site and currently I see that the accordion toggles are all closed initially. When I click on one it opens, then I can click on another (in the same accordion) which opens, closing the first. This is what I'd expect to happen with the code in place, and what I think you are trying to achieve, right? One thing to note is that you not all of the closed accordion is clickable (only a smaller area which includes the title and open icon is, but there is some unclickable area within the toggle) this is the way it is implemented in the accordion module itself and something to watch out for.
You should be able to limit it to accordions with your "faqs" class by replacing each of the 3 instances of ".et_pb_accordion" with ".et_pb_accordion.faqs" in the above code.
If you're still having trouble with any of it, let me know. Thanks!
I have Divi Booster. Love it. Trying to get the accordion toggles to close when you click on the toggles. Your path above says: ""Accordion Module Settings > Design > Toggle Text > Initial State" to one of "Default", "All Closed" and "All Open"."
There isn't any thing in Toggle Except color choices for open and closed.
I have long copy in the last of a toggle and I don't want to have to scroll all the way to the top to close it and go.
Please advise.
Thanks,
Randy
Hey Randy, not sure if Divi have done a bit of a rearrange of the toggles or if I did something wrong, but currently the setting is showing up under "Accordion Module Settings > Design > Title Text" (not Toggle Text). You'll find the setting near the end after all the other title text settings. It's not a great place for it, so for the next version of Divi Booster (2.9.5) I've relocated it to "Accordion Module Settings > Design > Toggle". I've updated the post accordingly. Thanks!
Thanks for the tips. I'm surprised there isn't an option to do all these in the builder. I won't recommend ET to my clients 'cos not going to make support ET my full time job.
You're welcome, Martin. Totally understandable. If you do happen to find yourself working with Divi / other ET products in the future, feel free to give me a shout with anything you get stuck on.
Sorry but when I put the script in the CSS Main of the module and I received a lot of RBRACE error. What I am doing wrong? Sorry such a basic doubt.
Hi Claudio, the code in this post is jQuery code, not CSS, so it won't work in the module custom CSS. Instead, it can be added anywhere that JavaScript can be added.
To apply the code on the current page, for example, you can add a "Code" module anywhere in the page and place the code above in that module's settings in the "Code Module Settings > Content > Text > Code" field.
To apply the code to all accordions on your site, you can add the code to the "Divi > Theme Options > Integration > Add code to the head of your blog" box.
I hope that helps, but let me know if you still can't get it to work. Thanks!
https://www.konvertklicks.com/career-in-digital-marketing
I have added the code here.. but i am not able to close once opened
Hey Asif, I have a separate post on how to make the accordions closeable:
https://divibooster.com/make-divi-accordion-module-closable/
Add that code, in addition to what you've already added, and you should have accordions that start closed and can be closed once opened. I hope it helps!
Hi Dan,
I am no longer able to open/close my accordions. (I was initially able to do so). Can you provide any troubleshooting tips?
Hi Ashley, are you able to share a link to the page with the accordions, so that I can take a look for you? There are a few things that might cause this, so if you can share a link that should help me narrow things down for you. Thanks!
Awesome, it works correctly. I was looking for even other extensions, but thanks to that I stayed with the divi
Great! :)
Hello Dan, that's great one from you. But what if I want to leave all tabs open by default, how do i go about that
Hi Emmanuel, you should be able to do it with the following:
jQuery(function($){ $('.et_pb_accordion .et_pb_toggle_close').toggleClass('et_pb_toggle_open et_pb_toggle_close'); $('.et_pb_accordion .et_pb_toggle').click(function() { var toggle = $(this); setTimeout(function(){ toggle.closest('.et_pb_accordion').removeClass('et_pb_accordion_toggling'); },700); }); });It's worth noting that with all the tabs open, you won't be able to close any of them. If you'd like to be able to close them, you can add this code too:
https://divibooster.com/make-divi-accordion-module-closable/
Bonjour
pourriez-vous préciser ou l'on doit coller ce code (pas à pas, merci car je suis novice avec DIVI et wordpress)
Bonjour eric,
There are various ways to do it, but one way to add the code is:
I hope that helps!
Great, it worked for me
I just wanted to confirm that script is working like a swiss clock. You just have to add this script in Integration section of Divi's Theme Option and to be precise – to add it in the .
That's all – no more no less.
Thanks for confirming that, Emanuel. I'm glad it worked for you. It looks like WP has stripped out part of your comment. I'm assuming you wrote: "add it in the <head>"? Thanks again!
Yes Dan , you are right about stripping. Have a nice day.
Great. You too, Emanuel :)
Hey Dan, i already have the Divi Booster, but, i need another thing: can i go to other page with some especific accordeon part oppened. Example, i have one accordeon with 4 itens, if i click on the home page on the link 2, it goes to the page where the accordeon is and the item number 2 is already oppened. You get it?
Hey Arthur, try this:
https://divibooster.com/open-a-particular-accordion-module-item-by-linking/
Hope it helps, but let me know if not!