How to close the Elementor accordion by default?

The first item of Elementor accordions is opened by default. In this post, I will show how you can close it.

Also, you’ll learn how to close them if you have many accordions on the same page.

Let’s get started.

How to make the Elementor accordion default closed?

If you want to close the starting accordion, write the following code/script on the same page (using Elementor). I showed you how to do that (in the next section).

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
    setTimeout(function() {
        document.querySelector(".elementor-tab-title").classList.remove("elementor-active");
        document.querySelector(".elementor-tab-content").style.display = "none";
    }, 50)
    });
</script>

This is a plain/vanilla Javascript that does not require any other dependencies. And it makes the Elementor accordion close both on mobile and large devices.

I gave you the actual code above to close the Elementor accordions by default.

In the next section, I will show you how to use this code on your web pages. This instruction is intended to help beginners.

How you can paste the code using Elementor?

You can copy & paste the above code into your Elementor page and before the accordion widget. Drag & drop an HTML widget on top of the accordion and paste the code (as you see in the screenshot below).

And paste the code into the HTML widget. See the screenshot below:

How to close multiple accordions on the same page?

If you have multiple Elementor accordions on the same page and if you want to close them all, the querySelector will not work in that case.

To achieve this goal, you have to use querySelectorAll to get the list/node of all the elements. And in the next step, you have to create a for loop for the iteration both for the tab title & tab content.

If none of these make sense, don’t worry! You can copy & paste my code as you see below.

<script>
document.addEventListener("DOMContentLoaded", function(event) {
setTimeout(function() {
  const tabtitle = document.querySelectorAll(".elementor-tab-title")
  for (let i = 0; i < tabtitle.length; i++) {
    tabtitle[i].classList.remove("elementor-active")
  }
  const tabcontent = document.querySelectorAll(".elementor-tab-content")
  for (let i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none"
  }
}, 50)
})
</script>

You need to paste the above code only once (before the first accordion).

How does this code work with Elementor accordions?

This section explains the code for this one.

If you inspect any of your accordions, it has a CSS class of “elementor-tab-title” and the first accordion has another class of “elementor-active” which makes it open.

In my code, I am targeting the accordion titles and removing the “elementor-active” class as you see below.

document.querySelector(".elementor-tab-title").classList.remove("elementor-active")

In the next line, I am also targeting the description (.elementor-tab-content) of the accordion and hiding it.

document.querySelector(".elementor-tab-content").style.display = "none"

I used the “setTimeout” method. The number “50” is a millisecond that is not visible to human eyes. That means the function will execute in 0.05 seconds.

Finally, I wrapped the entire method (that also contains the function) within a “DOMContentLoaded” event listener. This way I am holding the code execution until the DOM or page content has fully loaded. Otherwise, the accordions may appear (with the first item opened) in a few cases.

This is how I made sure the code worked everywhere and on all devices.

Frequently asked questions

Now you know how to close the Elementor accordions. But if you still have any questions, keep reading.

Is it a good idea to close the accordions by default?

It’s neither a good nor bad thing. This is just a matter of choice & necessity. Some website owners like the accordions closed by default and some are not.

Elementor accordions behave like a toggle. These accordions contain titles and descriptions. The description is generally closed (collapsed) and it opens after you click the accordion title. In the same manner, it closes after you click the title again or click on another accordion title.

The accordions are generally used when you create a FAQ section (Frequently asked questions). It can contain lots of text within a small space. So your visitor can see/read all the questions quickly and only expand the text/description they are interested in. It also saves lots of scrolling.

Can I use jQuery to close the Elementor accordion?

Yes, you can close the accordions in a few different ways and even use CSS. To collapse all the accordions using jQuery, see the code below:

jQuery(document).ready(function($) {
 var wait = 50; setTimeout(function() {
 $('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, wait);
});

However, make sure you wrap the above code within the <script> tag before you paste it into the HTML widget of Elementor (as you see in the screenshot below).

And hit “Update.” Go to your page & refresh. Now you will see that the accordions are all closed by default and including the first accordion.

How to close the Elementor accordions globally?

Let’s say you have 20 accordion widgets on different pages. Now the question is do you need to copy & paste the same code in 20 different places?

The answer is simply “No” and this is where the DRY (Don’t repeat yourself) principle comes into play. Instead of pasting the same code over & over, you can paste the code in one place to initially close all the accordions.

There are a couple of ways you can close the accordions globally. Such as child themes, plugins, etc. Since you’re using Elementor Pro, you can use their built-in “Custom Code” feature.

So, if you want to close all the accordions globally, you can paste the code into the Elementor “Custom Code.”

To do that, head over to the WordPress dashboard, navigate to “Elementor → Custom Code” and click on the button “Add new.”

In the next window, give it a name that is meaningful to you. Paste your code, and hit “Publish.” See the screenshot below for more clarification.

That’s it. Now the code is globally active. So you don’t need to copy & paste the same code if you create accordions in the future and on a different page.

See also: How to close Divi accordion by default?

How to inspect the accordions to find the class names?

If you inspect the element (first accordion title), you will see that it has two CSS Classes “elementor-tab-title” & “elementor-active.”

The “elementor-active” class makes it active and it tells the web browser it’s okay to open its description.

And if you inspect the description (first accordion), you’ll see that it has an inline style (display: block) and that is why the description is expanded.

How the code is overwriting the CSS & removes our desired class name?

setTimeout() is a function that fires after the given time. In the above code, the setTimeout() function will trigger after 50ms that we declared in the JavaScript variable.

jQuery removeClass method removes the “elementor-active” class after 50ms (that is not visible to human eyes).

And jQuery CSS method overwrites the CSS to (display: none).

This is how this code is making the Elementor accordion closed by default.

Why is the jQuery code not working on localhost?

If you’re working on localhost and trying to close the Elementor accordion using the jQuery sample code, it may or may not work for some of you.

Because it needs a jQuery library to load before it does and localhost sometimes fails to load jQuery. So if you are testing the Elementor accordion on your localhost but facing an issue, this could be the reason. But the jQuery example that I showed you, will work on the live site.

To avoid conflict, I would suggest you use the plain Javascript code that you saw at the very top of this post.

What if it does not work on mobile devices

In some cases, the jQuery solution may not work on mobile devices (depending on your installation & setup). It’s either jQuery is not loaded or DOM finishes loading after. Whatever the reason, I have another solution for it.

Use the first example (plain JavaScript) to avoid this type of issue.

Conclusion

I gave you three ways to make the Elementor accordion closed by default.

1. Using plain JavaScript
2. jQuery
3. Global custom code

Also, answered many common questions and troubleshooting.

Now it’s your turn!

Were you able to close the starting accordion in Elementor? Let me know, right now.