How to Make Accordion Closed by Default Elementor

Accordion is a widely used component in web design. It helps to improve the interface of the website, make it more user-friendly and increase its conversion rate. The Accordion widget is ideal for creating sections like Frequently Asked Questions (FAQ) or anything similar.

In this guide, I’ll show what an accordion widget is and how to make the accordion closed by default in elementor with code.

Table of Contents

What is Accordion Widget in Elementor?

The accordion widget in Elementor is a component that has several elements which are foldable. If you open one element, it will collapse other elements under the same parent accordion section.

The Accordion Widget collapses and condenses text to save room while still displaying a large amount of information, so the visitors will only expand an item relevant to their interest. Now, let’s discuss why to make elementor accordion closed by default and how to acheive it using custom code.

Why Make Accordion Closed by Default Elementor?

The first item in an accordion is always opened by default when an internet user visits a website while the rest of the items in the accordion are closed. Some users find it inconvenient since the fundamental goal of creating an accordion is to hide the information to save space or for any reason, and to reveal the content requires user action (clicking on an accordion item).

As I mentioned, the first item in an accordion is always opened by default so there are no elementor settings to close all of the items in accordion by default, to close all items of the accordion by default, you need to use code

Make Accordion Closed by Default in Elementor with Code

In order to make accordion closed by default in elementor, you need to write code for it. To do so, go to your elementor page builder and search for a custom HTML widget, drag it anywhere on your page, and then paste the following code in that HTML widget.

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

After you’ve pasted the above code, update your page and verify that all of the items in the elementor accordion will now be closed from the start/defualt.

How to Make Accordion Closed by Default Elementor

Make Accordion Closed by Default in Elementor on Mobile with Code

In order to make accordion closed by default in elementor on mobile devices, then you need to write the following code

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

Note: The 425 is the width of a mobile device in the above code, but you may use the width according to your liking.

FAQ( How to Make Accordion Closed by Default Elementor )

How do I make my Elementor accordion closed by default?

To keep the accordion closed by default in elementor, add the following code in the Custom HTML widget of Elementor:

// Add script tags above and below this code
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$(‘.elementor-tab-title’).removeClass(‘elementor-active’);
$(‘.elementor-tab-content’).css(‘display’, ‘none’); }, delay);
});

Conclusion:

In this guide, I showed how to make accordion closed by default in elementor using Javascript code, and if you want the accordion to be closed only for mobile devices because on mobile these accordions can take a lot of space then, I also showed you how you can close the accordion only for mobile devices. I hope that you are now familiar with how to set accordion closed by default in elementor.

If there is anything else that you would like us to cover feel free to contact us via the comments section below. Also, If you have any questions or feedback feel free to leave a comment.

Thank You! Have a nice day :)…