How to close accordion tabs by default in Elementor

As you know the Elementor accordion widgets display the first tab by default and sometimes you might need to close all of the accordion elements when the page is loaded.

Since there is no option to set the accordion tabs to be closed on the initial page load, we gonna need to apply some code in order to make it work like that.

Close all accordion tabs [Code Snippet]

Here is the code snippet that will close all tabs when the page is loaded.

How to add custom code snippet in Elementor PRO

To apply this code with Elementor PRO, just access your WP admin area and access Elementor > Custom Code. Here just click on the Add new code button and name your code snippet.

If you are a user of the free Elementor plugin you can use the Insert Headers and Footers plugin to add the custom JS code to your pages.

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

Select the desired place where the code should be executed and set it to body start and save changes.

accordion tabs closed elementor code snippet

You can also access the Conditions options and apply code for the entire website or just on the page where you are using Accordion widgets.

After everything is set up, click the Update button and test the applied changes. You should see all accordion tabs closed on the page load.

Close all accordion tabs on mobile only [Code Snippet]

Some of you might want to alter the tabs default display behavior for mobile devices only. If this is the case, consider using this code instead.

You can tweak the value of 425 to match the desired screen size of devices you want to affect with these changes.

To apply the code, follow the same procedure as for adding the previous code from above.

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

After you apply the code, remember to clear your website cache and browser cache and test the changes online.

Conclusion

This is a simple code snippet solution for closing the Accordion tabs by default. You can also search for the plugin that offers similar functionality or ask for help in the comments section.

Share this post if you like it.
Default image
Davor Veselinović

I'm Davor, founder of Worda Themes. Working as a Full Stack Developer with more than a decade of experience with WordPress. I build themes and plugins and enjoy writing useful blog posts and share my ideas with others.

2 Comments

  1. Hi Davor,
    Thanks for this code snippet. I choose to use this code with the Insert Headers and Footers plugin and i would like to know if there is a way to create conditions also with this plugin or within the code itself. for example, to work only in a specific page or exclude a specify page. Hope to ear from you soon.

Leave a Reply