The Accordian Module
If you want to start with all the toggles closed, one way is to add display:none; to the 1st toggle's Main Element CSS. But rather than just hiding the first toggle you can make it a close-all button and 'header' for the accordian module.
Give the first toggle a Title but leave its content empty. The 1st toggle needs to look a bit different so change its background colour and choose an appropriate close toggle icon e.g (^) . You can see how it works below.
1st Toggle becomes the header and Close-all button
Second Toggle - try me!
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.
Third Toggle
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.
This works with Divi-5 but they recently added a bug that stopped hiding the icon in an open accordion with zero content. I also thought the default animation is a little slow so CoPilot helped with some Javascript that fixes both problems. Just add the following code (placed between script tags) to a code module on the page.
(function($) {
$(document).ready(function() {
// Target the Divi Accordion click
$(‘.et_pb_accordion .et_pb_toggle’).on(‘click’, function(e) {
var $this = $(this);
var $accordion = $this.closest(‘.et_pb_accordion’);
// If clicking a closed item, close all others first
if ($this.hasClass(‘et_pb_toggle_close’)) {
// Quickly slide up other open items
$accordion.find(‘.et_pb_toggle_open .et_pb_toggle_content’)
.stop().slideUp(200);
// Update classes for other items
$accordion.find(‘.et_pb_toggle_open’)
.removeClass(‘et_pb_toggle_open’)
.addClass(‘et_pb_toggle_close’);
// Fast slide down the clicked item
$this.find(‘.et_pb_toggle_content’).stop().slideDown(200);
$this.removeClass(‘et_pb_toggle_close’).addClass(‘et_pb_toggle_open’);
}
// Prevent Divi’s default slow script from firing
e.stopImmediatePropagation();
});
});
})(jQuery);