Elementor accordion default closed

- April 11, 2024

In this blog, we will show how to close by default element accordion. By default, you can’t do this in Elementor. we need to do some custom JS coding

Don’t worry, I will give you the code and instruct you how to use them.

Before you start, check the tutorial requirements:

you can use another plugin to input custom js. i will recommend this plugin because I have used it in many clients’ projects it works perfectly.

Step 1: Using Simple Custom CSS and JS plugin

install the plugin and activate this

Now hover plugin option and choose the Add Custom JS option, give a name, and past the jQuery code here

Code:

jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay);
});
jQuery(document).ready(function($) {
    var delay = 100; 
    setTimeout(function() {
        // Iterate over each accordion widget
        $('.elementor-accordion').each(function() {
            // Find the first tab and content within this accordion and deactivate them
            $(this).find('.elementor-tab-title').first().removeClass('elementor-active');
            $(this).find('.elementor-tab-content').first().css('display', 'none');
        });
    }, delay);
});

Step 2: Using Code HTML Widget in Elementor

is step 1 not working then you can follow this step. we will use the same code in edit that page where we used the accordion

we will use this same code using an HTML widget in elementary

add Accordion widget, Remember this code only work on this widget only

Now add an HTML widget

Then Past the code

Code:

<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay);
});
</script>

That’s all, If you have any problem please comment use below.

Related Posts

Leave Us a Comment