By default, the Divi Accordion module opens the first accordion item when the page loads. If you want a cleaner FAQ, pricing, product details, or documentation layout, you may prefer all accordion items to start closed instead.
Quick answer: To make a Divi Accordion module start all closed, open the Accordion module settings and set Design → Toggle → Initial State to All Closed. This option is added by Divi Booster. Alternatively, you can use a jQuery snippet to remove Divi’s default open state from the first accordion item.
Recommended: Use Divi Booster if you want to make accordions start all closed from the normal Accordion module settings, without adding or maintaining custom jQuery.
Watch the walkthrough below to see both methods in action:
This guide works with both Divi 5 and Divi 4. It shows you how to set the accordion module all closed on load using these two methods:
- Divi Booster – No-code setup, easier future changes, Divi 5 / Divi 4 compatibility
- jQuery – One-off custom code changes, if you are comfortable maintaining snippets
Note: This guide covers making the Accordion module start closed on page load. If you want visitors to be able to close an already-open accordion item after clicking it, see the related guide on making Divi accordion items closeable.
Before and After
The example below shows the difference. On the left, Divi’s default Accordion module opens the first item automatically. On the right, the accordion starts with every item closed, creating a more compact layout on page load.
How to Make a Divi Accordion Closed by Default Using Divi Booster
Divi Booster adds an Initial State option to the standard Accordion module settings, letting you choose whether the accordion starts in Divi’s default state, all closed, or all open. Here’s how to use it to make a Divi accordion start closed by default.
Install and Activate Divi Booster
First, install and activate Divi Booster on your site. This adds the Initial State option to Divi’s Accordion module, so you can set the accordion to start all closed without editing code.
After activating Divi Booster, open the page containing your Accordion module and follow the steps below.
Open the Accordion Module Settings
Locate the accordion module you want to modify, or add it to your layout if you haven't already. Then, hover over the module to reveal the module buttons. If your Divi Builder is set to use "Click" mode, you may need to click on the module instead of hovering. Click the "Gear" icon to open the module's settings.
Go to "Design → Toggle → Initial State"
Now, in the Accordion module settings, click on the Design tab and then on the "Toggle" to expand the Toggle settings. You should now see the "Initial State" option added by Divi Booster.
Choose "All Closed"
If you click on the "Initial State" select box, you'll see three options. "Default" just gives you the standard accordion module behavior – it leaves the first toggle open as normal. "All Closed", which is what we want here, makes the Divi accordion module start with all of its toggles closed. There's also "All Open" which makes the accordion start with all of the toggles expanded. Click on "All Closed" to set the initial accordion module state to all closed.
Save and View the Result
Now save the module settings. Note that the initial state setting doesn't show in the visual builder preview. To see the result, save your page or post and view it on the front-end. You should now see that your accordion module starts with all of its toggles closed.
After a visitor opens one item, the module behaves like a normal Divi accordion: opening another item closes the previously open one.
Tip: Want every Accordion module on the site to start closed? Divi Booster also includes a global option under Divi → Divi Booster → Modules → Accordion.
Continue Customizing Your Accordion
Once your accordion starts all closed, the next useful improvement is usually to control how visitors interact with it. You may also want to:
How to Make a Divi Accordion Start All Closed Using jQuery
If you are comfortable adding custom code to your site, then it is possible to make a Divi accordion start closed using jQuery. This is useful if you only need a one-off code solution. However, because it depends on Divi’s accordion markup and CSS classes, you may need to retest it after major Divi updates. That said, let's see how it can be done.
Open the Divi Theme Options
Divi's Theme Options include various settings for configuring Divi, including the option to add custom code. To open the theme options, from your WordPress dashboard, click on "Divi" in the sidebar menu, then the "Theme Options" sub-menu item.
Navigate to the "Add Code to the Head of your Blog" Setting
Now click on the "Integration" tab in the Divi Theme Options, which brings up options for adding custom code to Divi. You should see a box called "Add code to the < head > of your blog" which allows HTML, JavaScript and jQuery code to be added to your site:
Add jQuery Code to the Site
The jQuery code below will enable the accordion toggle closing functionality to your site. Paste it into the "Add code to the < head > of your blog" box then click "Save Changes" to save the Divi Theme Options.
Prefer not to maintain custom code? The Divi Booster method above adds this as a built-in Accordion module setting, so you can change the initial state directly in Divi instead of editing jQuery.
<script>
jQuery(function($){
$('.et_pb_accordion.accordion-all-closed .et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
$('.et_pb_accordion.accordion-all-closed .et_pb_toggle').click(function() {
$this = $(this);
setTimeout(function(){
$this.closest('.et_pb_accordion.accordion-all-closed').removeClass('et_pb_accordion_toggling');
},700);
});
});
</script>Related Post: Adding JavaScript / jQuery to Divi.
Open your Accordion Module's Settings
Locate the accordion module you want to have fully closed on initial load, or add it to your layout if you haven't already. Then, hover over the module to reveal the module buttons. If your Divi Builder is set to use "Click" mode, you may need to click on the module instead of hovering. Click the "Gear" icon to open the module's settings.
Add the "accordion-all-closed" Class to Your Accordion Module
In the Accordion Settings, click on the "Advanced" tab.
If you're using Divi 5, expand the Attributes settings group, click Add Attribute, set the attribute name to class, and enter accordion-all-closed as the value. Then close the Edit Attribute modal.
If you're using Divi 4, expand the "CSS ID & Classes" settings section. There you should see a "CSS Class" field. Enter accordion-all-closed into this field and then save the module settings.
Save and View the Result
Now save the module settings. Note that the code won't apply in the visual builder preview. To see the result, save your page or post and view it on the front-end. You should now see that your accordion module starts with all of its toggles closed.
Optional Next Steps
The jQuery method will make the selected accordion start closed, but it does not add a visual setting inside Divi. If you later want easier control over accordion behavior, you may want to use Divi Booster’s Accordion module options instead. You can also continue with these related guides:
Troubleshooting: Divi Accordion Still Opens the First Item
If your Divi accordion still opens the first item after following the steps above, check the following:
Clear your caches. If you use a caching plugin, CDN, or Divi’s static CSS cache, clear those caches and reload the front end of the page.
Check you are viewing the front end, not only the Visual Builder. The closed state may not appear in the Visual Builder preview. Save the page and view it normally.
Make sure the class is added to the Accordion module, not an individual accordion item. For the jQuery method, the accordion-all-closed class needs to be added to the module’s CSS Class field.
Check for other accordion scripts. Other snippets or plugins that change accordion behavior may override the initial state.
Confirm the module is an Accordion module, not separate Toggle modules. Divi Toggle modules already have their own open / closed state setting, while Accordion modules behave differently by default.
FAQs
Can I make a Divi Accordion module start with all items closed?
Yes. Divi opens the first Accordion item by default, but you can make the Accordion module start all closed using Divi Booster’s Initial State setting or by adding a small jQuery snippet.
Does Divi have a built-in setting to make Accordion items all closed?
Divi’s Accordion module does not include a native “all closed by default” option. Divi Toggle modules have an individual open / closed state setting, but the Accordion module normally starts with the first item open.
What is the difference between making an accordion all closed and making it closeable?
Making an accordion all closed controls its state when the page first loads. Making it closeable controls whether visitors can close an open accordion item after they have clicked it.
Can I make all Divi accordions on my site start closed?
Yes. Divi Booster includes a global Accordion module option under Modules → Accordion that can make accordions start closed site-wide.
Does this work in Divi 5 and Divi 4?
Yes, the Divi Booster method is intended for Divi 5 and Divi 4. If using custom jQuery, test after Divi updates because custom code may need maintenance.
Can I make the accordion closed on mobile but open on desktop?
Yes, but it requires a workaround. You can create two synchronized global copies of the same Accordion module, disable syncing for the Initial State and Visibility settings, then show one version on desktop and the other on mobile/tablet with different initial states.
Conclusion
Making your Divi Accordion module start all closed is a simple way to keep FAQ sections, pricing details, product information, and documentation pages cleaner on first load. If you want the easiest setup, Divi Booster adds the Initial State option directly to the Accordion module, so you can choose All Closed, All Open, or Divi’s default behavior without maintaining custom code. From there, you can keep refining the user experience by making accordion items closeable, adding open / close all controls, or improving the scroll behavior of long accordion sections on mobile. If there’s another accordion behavior you’re trying to create, ask in the comments and I’ll try to point you in the right direction.
Is there a way to begin all closed on mobile & all open on desktop?
Hey Jeff, sorry I'm only just responding now. There isn't an easy way to do this at the moment. I'll try to come up with a way to do this in the future and let you know if / when I do. The best workaround I can think of at the moment is to create two copies of the accordion, and set one copy to be closed on mobile and disabled (i.e. hidden) on desktop, and the other copy to be open on desktop and disabled on mobile. To avoid maintaining two accordions you could save the main accordion to the library as a global module and then make the copy another instance of that global module. This way the content, etc, would be synchronised between them. You could then disable synchronisation on any fields such as the initial state and visibility that you want to configure separately for each instance. A bit clumsy, but it should work…
Do you know how to do the same but on mobile?
Hey Kevin, as per my reply on your comment on another post it should work on both desktop and mobile. If you haven't already, try clearing the cache on your mobile browser. If that doesn't help, are you able to point me to the accordion you're working on so that I can take a look? Cheers!
Thanks, it's working :)
Great to hear, Kevin. Thanks!
I will try it soon, because I have a problem with that too. Hope it works
Yeah, hope it works for you Konrad, but let me know if you have any trouble with it.
Is it possible to change which tab that is opened by default? For example, et_pb_accordion_item_3 instead of the first one?
I solved it my self. :-) Here's the code:
jQuery(function($){
$('.et_pb_accordion_item_0').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
$('.et_pb_accordion_item_4').addClass('et_pb_toggle_open').removeClass('et_pb_toggle_close');
$('.et_pb_accordion .et_pb_toggle').click(function() {
$this = $(this);
setTimeout(function(){
$this.closest('.et_pb_accordion').removeClass('et_pb_accordion_toggling');
},700);
});
});
item_0 is tab #1 and item_4 is tab #3. Just change item_4 to whatever tab you want to have open by default.
Nice work, Victor! Thanks for sharing your solution :)
This code doesn't seem to work as of today.
Hi Sara, the code is still working on my test site with the latest Divi (4.8.2), so I'm not sure why it isn't working for you. Is there any chance you're able to share a link to an example page, either here or via the contact form? Thanks!
This is awesome. I was looking for the same. Thanks for sharing.
But i guess Divi should give a option as Default. It would be much more easy.
You're welcome Asif :)
Thanks for the help. It was great.
I have a need and I hope you can help me (and hopefully others)
You're welcome, Adrian. If there is something I can help with please feel free to ask her or via the contact form. Thanks!
Este tema, junto con este: https://divibooster.com/make-divi-accordion-module-closable/
al fin el acordeón funciona como debería!!!
Muchas Gracias!
De nada, Julián. Yeah, the combination of this post and the one you link to work well together to make the accordion behave as expected. Thanks!
Hey Dan, is there a way to remove the pointer effect that happens when you hover over the title of an accordion box? I have all the boxes set to stay open so it doesn't make much sense to show a pointer when the title is hovered over.
Hey Dylan, you should be able to it using the code in this post:
https://divibooster.com/disable-pointer-clicking-on-open-accordion-module-toggles/
I hope it helps!
Thank you that worked like a charm.
You're welcome, Dylan :)