Web Analytics

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>

[Source: Elegant Themes]

Alternative option: 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.