Close Elementor accordion by default

The first element of Elementor accordions is opened by default. It’s not a good or bad thing and just a matter of choice. 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.

Elementor first accordion is opened by default

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.

How to close the Elementor accordion automatically (by default)?

To make the Elementor accordion closed by default, write the following custom script:

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

You can copy & paste the above exact code into your Elementor page and before the accordion widget. Drag & drop an HTML widget on top of the accordion and paste the above code. See the screenshot below:

Drag & drop HTML widget before the accordion in Elementor

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

Copy & paste the scripts into the HTML widget

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.

That’s it!

If you want to close all the accordions globally, you can paste the code into the Elementor “Custom Code.” For example, you have many accordions on many different pages. Instead of pasting the same code over & over, you can paste the code in one place to initially close all the accordions.

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

Add new custom code in Elementor

In the next window, give it a reference name that is meaningful to you, paste the code and hit “Publish.” See the screenshot below.

Publish new code in Elementor custom code section

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.

What has in the code that closes the first accordion by default?

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

Elementor active accordion CSS classes

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.

Troubleshooting

If you’re working on localhost and trying close the Elementor accordion using the above sample code, it may or may not work. Because the above code needs jQuery 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 this example that I showed above will work on the live site.