How to Change Divi’s Toggle/Accordion Module Animation Speed

by | Aug 31, 2020

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.

Divi's toggle animation speed is so slow

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:

function my_enqueue_assets() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
wp_enqueue_script( ‘custom-js’, get_stylesheet_directory_uri().’/js/custom.js’, array(‘divi-custom-script’, ‘jquery’), ‘1.0.0’, true );
}

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.

Changing Div's toggle animation speed can be done

by Nathan Duvall

Nathan is the creator and an owner of BeSuperfly, one of the first third party Divi shops as well as the creator of GruffyGoat.com, an agency he started in 2012, dedicated to offering affordable websites solutions to non-profits, mom & pop shops and everyone in-between. In his spare time, you'll find him wrangling his 2 boys or watching his Tennessee Volunteers or Indianapolis Colts.

more posts

Why Should I Use Divi?

Why Should I Use Divi?

It’s no secret that Divi is one of the most popular WordPress themes in the world. It’s popular among beginners and...

What is a Child Theme?

What is a Child Theme?

One of the greatest benefits of WordPress is the ability to customize our theme. Unfortunately your customizations can be lost...

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *