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.

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.