By default, the first item in a DIVI accordion module is open. Here are two ways to close all items automatically.
Option 1: make all the first items of all accordions closed by default
If you want to make all accordions closed by default, go to the “Add code to the < head > of your blog” section in Divi > Theme Options > Integration, and add the following code:
<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>
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
[Source: Elegant Themes]
Option 2: because options are good
Below is an alternative that applies this change to both accordions and toggles.
<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>
[Source: Divi Booster]
If you only want to make one accordion closed by default, leaving others to open the first item automatically, go to the “Add code to the < head > of your blog” section in Divi > Theme Options > Integration, and add the following code:
<script>
jQuery(document).ready(function() { jQuery('.et_pb_module.et_pb_accordion.close_accordion .et_pb_accordion_item.et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
});
</script>
Once you’ve done that, go to the accordion module where you want the first item to be closed by default, and in the settings, go to the Advanced tab > CSS ID & Classes, and change the CSS class to:
close_accordion
[Source: Elegant Themes]
That’s it.