Do you notice that the animation effect on your Divi Accordion or Toggle module is slow? While Divi offers great functionality, the default animation speed might not always be ideal. A slow animation can make your website feel clunky and unresponsive.
This article will walk you through the process of speeding up the Divi Accordion and Toggle modules’ animation only by adding a little bit of JavaScript code and giving your visitors a more seamless and intuitive experience.
Steps to Speed up the Animation Effect on Divi Accordion and Toggle Module
1. Add the Divi Accordion or Toggle Module
Well, first we need to add the module to your page. Go to the Divi Visual Builder, then navigate to the page where you want to include the Accordion or Toggle module.
Next, add the module (Accordion or Toggle) then customize the module to your preference. In this example, we add the Divi Toggle module to our page. You can’t add more toggles like with the Accordion module. However, you can duplicate the entire toggle section if you need to create multiple toggles.
2. Add the JavaScript Snippet
Next, we will add the JavaScript code to control the animation effect speed within the Divi Accordion and Toggle modules.
Add the Divi Code Module
We will insert the JavaScript code into the Divi Code module. Click on the section where you added the Divi Accordion or Toggle module. Afterward, add a new row, then locate the Divi Code module within that section row.
Add the JavaScript Code
Once you add the Divi Code module, it’s time to add the JavaScript snippet within the module.
Please copy the JavaScript snippet below and paste it into the available field:
<script>
(function($) {
$( 'body' ).on( 'click', '.et_pb_toggle_title, .et_fb_toggle_overlay', function() {
var $this_heading = $(this),
$module = $this_heading.closest('.et_pb_toggle'),
$section = $module.parents( '.et_pb_section' ),
$content = $module.find('.et_pb_toggle_content'),
$accordion = $module.closest( '.et_pb_accordion' ),
is_accordion = $accordion.length,
is_accordion_toggling = $accordion.hasClass( 'et_pb_accordion_toggling' ),
window_offset_top = $(window).scrollTop(),
fixed_header_height = 0,
initial_toggle_state = $module.hasClass( 'et_pb_toggle_close' ) ? 'closed' : 'opened',
$accordion_active_toggle,
module_offset;
if ( is_accordion ) {
if ( $module.hasClass('et_pb_toggle_open') || is_accordion_toggling ) {
return false;
}
$accordion.addClass( 'et_pb_accordion_toggling' );
$accordion_active_toggle = $module.siblings('.et_pb_toggle_open');
}
if ( $content.is( ':animated' ) ) {
return;
}
$content.slideToggle(200, function () {
et_toggle_animation_callback(initial_toggle_state, $module, $section);
});
if ( is_accordion ) {
$accordion_active_toggle.find('.et_pb_toggle_content').slideToggle(500, function() {
$accordion_active_toggle.removeClass( 'et_pb_toggle_open' ).addClass('et_pb_toggle_close');
$accordion.removeClass( 'et_pb_accordion_toggling' );
module_offset = $module.offset();
// Calculate height of fixed nav
if ( $('#wpadminbar').length ) {
fixed_header_height += $('#wpadminbar').height();
}
if ( $('#top-header').length ) {
fixed_header_height += $('#top-header').height();
}
if ( $('#main-header').length && ! window.et_is_vertical_nav ) {
fixed_header_height += $('#main-header').height();
}
// Compare accordion offset against window's offset and adjust accordingly
if ( ( window_offset_top + fixed_header_height ) > module_offset.top ) {
$('html, body').animate({ scrollTop : ( module_offset.top - fixed_header_height - 50 ) });
}
} );
}
} );
function et_toggle_animation_callback( initial_toggle_state, $module, $section ) {
if ( 'closed' === initial_toggle_state ) {
$module.removeClass('et_pb_toggle_close').addClass('et_pb_toggle_open');
} else {
$module.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close');
}
if ( $section.hasClass( 'et_pb_section_parallax' ) && !$section.children().hasClass( 'et_pb_parallax_css') ) {
$.proxy( et_parallax_set_height, $section )();
}
}
})(jQuery);
</script>
What Does the Code Do?
The JavaScript snippet uses jQuery to control collapsible content sections’ behavior, particularly within the accordion group (Divi Accordion and Divi Toggle modules). It ensures smooth animation effects and also handles situations where the toggle is within an accordion group; only one toggle is open at a time and adjusting the scroll position if necessary.
To control the speed of the animation effect, you can do it easily by replacing the values on these parameters to your liking:
$content.slideToggle(200, function () {$accordion_active_toggle.find('.et_pb_toggle_content').slideToggle( 500, function() {
The Bottom Line
This article explains how to speed up the animation of the Divi Accordion and Toggle modules by adding a bit of JavaScript code. The key takeaway is that you can customize the animation speed by editing the values within the provided code snippet (200 and 500 in the example). This code controls how the Accordion or Toggle modules open and close.
Overall, this tutorial empowers you to customize the animation speed of Divi’s Accordion and Toggle modules, enhancing your website’s responsiveness and user experience.
