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:
- Simple Custom CSS and JS plugin installed and activated
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);
});
Note: if you have multiple accordions on a page then this code not working, instead use this code
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.