How To Make Accordion Module Tabs Closable

Add the following code to make Accordion close at startup.

<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>

Add the following code to make an open Accordion to close

<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>

Finally add the following CSS to add (Minus) icon after the Accordion title of an open Accordion

.et_pb_toggle_open .et_pb_toggle_title:before {
display: block !important;
content: “\e04f”;
}