https://youtu.be/N4pcIuo6Kbw
Google is NOT my friend.
Not today, at least — nor, apparently, anybody else’s. Searches in multiple Divi user groups made it clear that I wasn’t the only one looking for the means to change the animation speed on the Divi Toggle and Accordion modules. It was also clear that the interwebz sort of shrugged its shoulders in answer to my queries.
As far as I can tell, there’s no “clean” way to achieve this. The animation speed is hard coded in a JS file inside the Divi theme core.
We all know that editing core theme files is a level of hackery unbecoming of a self-respecting WordPress designer/developer, so I came up with the cleanest methodology I could that’s based in a child theme:
Feedback welcome. If you’ve got a better solution, I definitely want to hear about it.
Thanks for taking the time to creating the video.
This is useful, but more useful would be if you gave us the function you were using to save having to type it out from the video.
Also, if you gave more details of the types plugin and how you used that it might help further.
Well, I kind of made the post in a hurry — but you’re right.
I’ll see about adding the code ASAP, as well as a little about how I leveraged Types for this.
Rob
Types part of Toolset which I also use, it’s a big time saver as you can create CPT and custom fields via a UI, then create custom loops, choosing what fields to show, and use DIVI builder to style them.
There is some more info about DIVI integration here:
https://wp-types.com/documentation/recommended-themes/toolset-divi-integration/
WP Types are also closing down Types as a free plugin, so you’ll need to buy a license. The lifetime license is worth it IMHO, same as the DIVI lifetime license. Big timesaver
Sad to hear that Types is going to be a paid plugin, but I heartily agree with you!
Hi Rob,
I would like to ask the same as David if you have some time to share the code with us.
Thanks very much for putting this video together, I’d recommend using youtube for your videos to get more exposure for Monti Design and make it quicker for viewers to scrub or reference a time in the video in the comments. This exposure might mean the DIVI devs will watch the video as you ask them to look into this issue at the end of the video. The solution proposed is to make a copy of a js file in the child theme and enqueue this conditionally (via your child theme functions) on the page that requires the accordian. You also… Read more »
Hi, John, Thanks for your comments! I actually started down the road of creating this via CSS3, but I was concerned that the inline styles being enforced by jQuery might create style conflicts and the associated headaches. None of the options that I could identify seemed terribly clean — this is what I settled on. As I mentioned in the video, the toggle animation speed is something that ought to be configurable within the builder, or perhaps the Divi options. As for your suggestion re: YouTube, that’s typically what I use. I was trying out Loom for creating blog tutorials,… Read more »
Hi Rob, this was posted about a year ago (and it’s amazing, thank you!) so I’m curious if there’s been any update/feedback from Elegant? I’m facing this exact issue with an accordion that I’d like to speed up, and while I’m following exactly what you did (and I could replicate it) I’d much rather it be an easier and more straightforward fix.
Nothing from ET, unfortunately.
Hi Rob, I’m not a coder so was wondering if a new custom accordion module or plugin would be possible instead?
it does seem hack still doesn’t achieve the speed many would prefer?
Wow!! This is an awesome solution. You’d think with all the bells and whistles Divi puts in their close to being bloated theme, they’d give us a transition control for the accordions, instead of a slow as molasses hard coded value. Mad props : ))
Another year later and this is still an issue. I’m shocked they didn’t either
1. change it to CSS3 for easier manipulation.
and/or
2. add a speed control in the options.
We’re halfway through 2020 and the folks at Elegant Themes still haven’t addressed this. There’s no way to override the animation speed using CSS. It looks like someone is selling a separate divi module that adds this functionality but I’m not going to spend money on something that should be an option out of the box. If everyone reading this contacts support about it maybe they’ll put it on their development road map…
It’s hard to believe this is still an issue after all this time! When searching for solutions, I came across your post. I couldn’t make out what code you were using in your original solution, but ended up finding another workaround that we’ve posted about here, just in case anyone is still looking for a solution to this madness: https://besuperfly.com/blog/how-to-change-divis-toggle-accordion-module-animation-speed/
Hopefully the powers at be at Elegant Themes give you a way to control this from the module settings themselves sooner than later.
I cant understand why the animationspeed is hardcoded in a js file. bad code !
Looks like in Divi v 4.14.5 the front-end-scripts.js file is no longer there, or has been renamed.