We love Divi around here, obviously, we were one of the first 3rd party developers to release products for Divi back in 2015. However, just like your friends & family who you love, Divi can annoy the crap out of you from time to time. Over the years, we’ve collected a library of “fixes” we hope to release as tutorials from time to time, that’ll hopefully lessen your frustration.
First up, what’s with the annoying speed at which toggles & accordions open and close? Personally, I’ve never liked the look of how they transition from closed to open and vice versa.
Like most things, you can find help, workarounds & fixes by searching one of the million helpful Divi Facebook Groups out there, but this one was a bit tough to find a solution for, so we wanted to show you how to Change Divi’s toggle/accordion module animation speed in 3 simple steps! Special thanks to Brant Barton, our resident expert Developer for the solution!
Step 1: Install a Child Theme (if you don’t have one installed already). Child themes are essential, in our opinion, but the main reason we recommend you use one is to protect your customizations from being overwritten any time Elegant Themes releases an update for Divi. If you don’t know what a child theme is, check out our post here for the deets. And if you need a Child Theme, you can download one for free there as well!
Step 2: Click here to download and unzip this folder (“js”) Add the entire folder to your main child theme folder.
Step 3: Open up your functions.php file and add the line in bold below underneath the line that’s enqueueing your main stylesheet:
add_action( “wp_enqueue_scripts”, “bsf_get_assets” );
function bsf_get_assets() {
wp_enqueue_script( “custom-js”, get_stylesheet_directory_uri().”/js/custom.js”, array(“divi-custom-script”, “jquery”), “1.0.0”, true );
}
Try as we might, we can’t get the quotes in the script above to be non-fancy quotes. Please make sure to use plain text quotes.
What you’re doing in Step 3 is telling Divi to override the default functionality of whatever scripts that are in the custom.js file. This is also a great place to add any other js tweaks or functionality you may wish to add to your site in the future.
That’s it! Your toggles should now open much more rapidly.
This worked great, thank you very much!
Except for one thing: For those of your who are not proficient in coding, you may notice that if you attempt this, it broke your website.
NO WORRIES! What happened is, when you pasted this line to your functions.php file:
wp_enqueue_script( ‘custom-js’, get_stylesheet_directory_uri().’/js/custom.js’, array(‘divi-custom-script’, ‘jquery’), ‘1.0.0’, true );
it probably pasted it with the wrong type of single quotes throughout the whole line. Simple erase and retype EACH single quote, and it will work properly.
Thanks again Nathan!
My customers were under the impression that bc of the ‘slow toggle opening speed’, the website wasn’t moving very fast. Once I changed this, they took their statement back immediately.
Thanks for your comment. The code above has been updated!
I was extremely happy to have found your solution. I have a client with multiple toggles on multiple pages. When the toggles on his website were closed the background was dark blue. When the toggles are open the background turns to white. Before implementing your solution the blue background stayed blue during the transition of the toggle from closed to open. Now with your logic in place, the toggle opens instantly and no more distracting blue background during toggle open. My clients website is https://www.sunworksplus.com.
OMG! Thank you! I’ve hacked it all sorts of ways, but this was the most elegant.
its working!
Awesome, glad you worked it out, Andri! Cheers!
I was able to change the code to enable open items to close onclick so that there is only one accordion open at any time. I am sure my solution isn’t the most elegant, but here it is.
(function ($) {
$(document).ready(function () {
$(‘body’).off(‘click’, ‘.et_pb_toggle_title, .et_fb_toggle_overlay’);
$(‘.et_pb_toggle’).click(function (e) {
$(‘.et_pb_toggle’).removeClass(‘et_pb_toggle_open’).addClass(‘et_pb_toggle_close’);
$(this).children(‘.et_pb_toggle_content’).toggle();
$(this).addClass(‘et_pb_toggle_open’).removeClass(‘et_pb_toggle_close’);
})
})
}(jQuery));
.et_pb_toggle_close .et_pb_toggle_content {
display:none !important;
}
.et_pb_toggle_open .et_pb_toggle_content {
display:block !important;
}
Your code removes the animation entirely. In the custom.js file, I changed the two lines:
$(this).children(‘.et_pb_toggle_content’).toggle();
$(this).toggleClass(‘et_pb_toggle_close et_pb_toggle_open’);
to
$(this).children(‘.et_pb_toggle_content’).toggle(‘fast’, function(){
$(this).toggleClass(‘et_pb_toggle_close et_pb_toggle_open’);
});
This change keeps the animation but makes it much faster than it was before.