So when it comes to Divi Accordion I didn't like how the first one was always open and there wasn't a way to close one without opening up another one. So I came across the following code to accomplish what I was looking for.
Here is the Javascript needed to give open/close capabilities as well as closed by default.
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); } }); $('.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); }); });
Here is the CSS that puts a close icon in the same spot that the open icon is to the right of the accordion.
.et_pb_toggle_open .et_pb_toggle_title:before { display: block !important; content: "\e04f"; }