All Collections
FAQ's and Troubleshooting
Make Divi Accordions Closed by Default
Make Divi Accordions Closed by Default

This article will guide you to keep all the Accordions in Closed state by default when the Page loads.

Rijendra avatar
Written by Rijendra
Updated over a week ago

By default, the Divi Theme's Accordion Module will have the first Accordion opened when the Page loads.

This will help you keep all the Accordions in a Closed state by default when the page loads.

If you want this for only specific Accordion modules then go to that Accordion Module Settings > Advance > Custom CSS Class

Use this as CSS Class: my_accordion

Then go to WordPress Dashboard > Divi > Theme options > Integration > <head> section, add this Script there:

<script>
jQuery(document).ready(function() { jQuery('.et_pb_module.et_pb_accordion.my_accordion .et_pb_accordion_item.et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
});
</script>

This will close the Accordion modules when the page loads for the Accordion modules in which you have used the same CSS Class: my_accordion

If you want this for all Accordion modules though out your site, then you don't need to define any CSS Class and directly use this Script in Theme options > Integration > <head> section:

<script>
jQuery(document).ready(function() { jQuery('.et_pb_module.et_pb_accordion .et_pb_accordion_item.et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
});
</script>

This will adjust all the accordion modules of your site without requiring to define any custom CSS class to the module.

Did this answer your question?