Creating a clean and organized user experience often involves controlling the default state of interactive elements on your website.
We will guide you through the process of configuring the Accordion Module in Divi to ensure that all items remain collapsed upon initial page load.
By default, the Divi Theme's Accordion Module will open the first Accordion when the Page loads. To ensure that all items remain collapsed upon initial page load, you can use two different methods:
Use custom CSS and an empty Accordion Item
Use custom JS code
Use custom CSS and an empty Accordion Item
Open the Accordion module's settings by clicking on the Gear icon
Add a new Accordion item by clicking on the Add New Accordion Item icon
Drag the new item at the top
Click on the Gear icon to open its settings
Remove its Title and Body Text
Go to Advanced Tab → Custom CSS → Free Form CSS
Add this CSS code
selector {
display: none;
}
Note: You can add as many Accordion Items as you need. Keep the first item in the list without a title and body text, and ensure it has the above CSS code added to Advanced Tab → Custom CSS → Free Form CSS.
The result can be seen in the screenshot below:
Use custom JS code
Open the Accordion module's settings by clicking on the Gear icon
Go to Advanced Tab → CSS ID & Classes → CSS Class and set a CSS class for the entire Accordion module. You can use dt-closed-accordion
Go to Divi → Theme Option → Integration tab → Header
Add this JS code:
<script>
(function ($) {
$(document).ready(function () {
$('.et_pb_module.et_pb_accordion.dt-closed-accordion .et_pb_accordion_item.et_pb_toggle_open')
.addClass('et_pb_toggle_close')
.removeClass('et_pb_toggle_open');
});
})(jQuery)
</script>
Pro Tip: If you want all the Accordion modules to have the first item always collapsed across your entire website, use this JS code instead:
<script>
(function ($) {
$(document).ready(function () {
$('.et_pb_module.et_pb_accordion .et_pb_accordion_item.et_pb_toggle_open')
.addClass('et_pb_toggle_close')
.removeClass('et_pb_toggle_open');
});
})(jQuery)
</script>
Note: This JS code doesn't use custom CSS classes and will apply to any instance of the Accordion module on your website.