Divi Help Documentation by Gables Tech

Accordions CSS

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.

Updated this week
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

Accordions – Make Accordion Modules Closeable

Add the following jQuery code to your site, e.g. by pasting it into the “Divi > Theme Options > Integration > Add this code to the head of you blog” box.

***

<script>
jQuery(function($){
$('.et_pb_toggle_title').click(function(){
var $toggle = $(this).closest('.et_pb_toggle');
if (!$toggle.hasClass('et_pb_accordion_toggling')) {
var $accordion = $toggle.closest('.et_pb_accordion');
if ($toggle.hasClass('et_pb_toggle_open')) {
$accordion.addClass('et_pb_accordion_toggling');
$toggle.find('.et_pb_toggle_content').slideToggle(700, function() { 
$toggle.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close'); 
});
}
setTimeout(function(){ 
$accordion.removeClass('et_pb_accordion_toggling'); 
}, 750);
}
});
});
</script>

***

To add a “close” icon to the open toggles, add the following CSS code to your site, e.g. by pasting it into the “Divi > Theme Options > General > Custom CSS” box.

***

.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before {
display: block!important;
content: "\e04f" !important;
}

Remove Spacing Between Accordion Items

Copy code bellow

***

margin-bottom: 0 !important;

***

1-Go to Accordions module setting
2- Go Advance > Custom CSS > Module elements > Toggle > Paste de code