You added an accordion in Elementor, filled in the FAQ section, saved the page, and noticed that the first item is expanded. You did not open it. But Elementor decided for you. This behavior is hardcoded into the widget and cannot be changed in the settings. For a landing page with a clean structure, this looks sloppy, and if the first block is heavy, it breaks the visual rhythm of the entire page.

This problem has existed for years. The official documentation states directly: "The first item of the Accordion widget is expanded on page load." That's it. But you don't have to stare at a forcibly expanded accordion. There are four solutions, and each one includes instructions below.

Below are methods to close the Elementor accordion by default: from a 30-second snippet to native alternatives and addons with a checkbox in the interface. These methods have been tested on Elementor 3.27-4.2 (Free and Pro) and work on desktop and mobile.

💡 Quick overview:

• Insert a JavaScript snippet into an HTML widget or Custom Code, and the accordion will close 100 ms after loading
• Replace Accordion with Toggle, a built-in Elementor widget where all tabs are closed out of the box
• For minimalists: a CSS rule hides the first element without a single line of JavaScript
• Install The Plus Addons or Essential Addons and get a native "First tab open" toggle right in the widget settings

Method 1: JavaScript snippet, universal

The most reliable method. Elementor adds the elementor-active class to the first accordion item on load. You just need to wait for rendering and remove this class.

A snippet in pure JavaScript, without jQuery:

1
<script>
2
document.addEventListener('DOMContentLoaded', function() {
3
    setTimeout(function() {
4
        const firstItem = document.querySelector('.elementor-accordion-item:first-child');
5
        if (firstItem) {
6
            const title = firstItem.querySelector('.elementor-tab-title');
7
            const content = firstItem.querySelector('.elementor-tab-content');
8
            if (title) title.classList.remove('elementor-active');
9
            if (content) {
10
                content.classList.remove('elementor-active');
11
                content.style.display = 'none';
12
            }
13
        }
14
    }, 100);
15
});
16
</script>

The setTimeout delay of 100 milliseconds is critical. Without it, the script fires before Elementor finishes initializing the accordion, and the classes simply won't be removed. On slow hosting providers or pages with a dozen widgets, increase it to 300-500 ms. Elementor users confirm on the forum: the method is stable up to version 4.2.

Where to insert it. Two options. First, HTML widget: drag it directly above the accordion in the editor and paste the snippet. The code will only run on that specific page and won't load where there is no accordion. Second, Elementor → Custom Code in the WordPress admin panel: create an entry, select Location body, and publish. The code will apply globally, which is convenient when accordions are scattered across a dozen pages.

If you have multiple accordions and need to close them all, replace querySelector with querySelectorAll and iterate through the collection:

1
<script>
2
document.addEventListener('DOMContentLoaded', function() {
3
    setTimeout(function() {
4
        document.querySelectorAll('.elementor-accordion-item').forEach(function(item) {
5
            const title = item.querySelector('.elementor-tab-title');
6
            const content = item.querySelector('.elementor-tab-content');
7
            if (title) title.classList.remove('elementor-active');
8
            if (content) {
9
                content.classList.remove('elementor-active');
10
                content.style.display = 'none';
11
            }
12
        });
13
    }, 100);
14
});
15
</script>

Didn't work on the first try? Almost always it's a timing issue: increase the delay to 1000 ms.

Method 2: Toggle widget instead of Accordion

The simplest native method is not to fight with the accordion but to use a different widget. Elementor ships two tools that look similar but behave differently: Accordion and Toggle.

The key difference:

Toggle is visually indistinguishable from Accordion: the same headings, the same arrow icons, the same animation. But all tabs are closed out of the box, no code needed. Open the widgets panel, find Toggle, drag it onto the page, and add items just like in Accordion. Done.

The only nuance: Toggle allows expanding multiple tabs at once. If the logic of "one open, the rest closed" is important, go back to Method 1.

Method 3: CSS, minimalist

JavaScript seems excessive? Close the first element with pure CSS:

1
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-content {
2
    display: none !important;
3
}
4
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-title {
5
    border-bottom-width: 0;
6
}

The first selector hides the content of the first tab. The second removes the bottom border of the heading, which looks like an abrupt cutoff without the content. Place the code in the "Advanced → Custom CSS" section of the specific widget (for a particular accordion) or in Appearance → Customize → Additional CSS (globally).

Note: CSS does not remove the elementor-active class but only visually hides the content. In the DOM tree, the tab remains "active." This does not affect site functionality, but if you use custom analytics for accordion clicks or third-party scripts tied to the class, the behavior might surprise you. For most scenarios, this method works and is the lightest.

If your theme overrides Elementor styles, increase specificity:

1
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-content.elementor-active {
2
    display: none !important;
3
}

Still didn't work? The theme probably uses its own JavaScript to force expansion. Go back to Method 1: the JS snippet fires later and overrides any theme behavior.

Method 4: addons with a native toggle

Some Elementor addons add a "First tab open" option to Accordion, one click instead of code. Two proven options:

The Plus Addons for Elementor. Extends the standard Accordion with the Default Open Tab → None option, keeping all tabs closed. The free version is sufficient. As a bonus, you get nested accordions, icons from the library, shortcodes, and Elementor templates inside tabs. WordPress.org page.

Essential Addons for Elementor. Two million active installations. This addon's Accordion also starts with closed tabs: the Accordion State and Enable FAQ Schema options are right in the widget settings. If Essential Addons is already installed for other widgets (Advanced Data Table, Filterable Gallery), no additional installation is needed. WordPress.org page.

The downside is obvious: dragging in a plugin with 100+ widgets for one option is overkill. But if the addon is already in your setup, you get a one-click solution.

⁉️🤔 Frequently asked questions

Why doesn't Elementor add a toggle to the standard Accordion?

The developers haven't given an exact reason. Based on discussions in the Elementor GitHub repository, the team considers the "first tab open" behavior correct for accessibility. Feature requests have been pending since 2018. Development priority has shifted toward AI features, Flexbox containers, and performance. Until a toggle appears, vote for the issue on GitHub and use the snippet from Method 1.

The script doesn't work on mobile. What should I do?

On phones and tablets, Elementor uses the same markup, but rendering is slower: weaker processors, more asynchronous requests. Increase the setTimeout delay to 500-1000 ms. Moving the snippet to the footer via the wp_footer hook also helps: the script executes last, after all Elementor styles and markup. On desktop there's no difference, but on mobile it's noticeable.

Can I use a jQuery version?

Yes, but we don't recommend it. Since version 3.0, Elementor has switched to native JavaScript for the frontend. The vanilla snippet from Method 1 weighs about 200 bytes compared to 87 KB for jQuery (minified) and doesn't depend on loading the library. If your theme or other plugins already load jQuery, there's no difference. But for modern themes on pure JavaScript, such as Hello Elementor, the native option is better: fewer dependencies, higher speed.

The CSS method doesn't work; the first item is still visible.

Your theme overrides Elementor styles with higher priority or uses JS to force expansion. CSS is powerless in this scenario: the theme script fires later and reopens the tab. Only the JS snippet from Method 1 resolves the conflict chronologically: it executes last and takes control.

Does the snippet work with custom themes and child themes?

Yes. The snippet operates on Elementor's own classes: .elementor-accordion-item, .elementor-tab-title, and .elementor-tab-content. These don't depend on the theme. We tested on Hello Elementor, Astra, GeneratePress, and Kadence: it works identically everywhere. The exception is themes that completely replace Elementor widget markup via filters (rare, mostly in premium bundles like Avada).

Accordion or Toggle: which to choose

Toggle solves the problem without code but lets users expand multiple sections at once. For an FAQ page or reference section, this is even a plus: visitors see all answers simultaneously. Toggle is native, fast, and doesn't require maintaining a snippet when Elementor updates.

If the "one open, the rest closed" logic is essential, use Accordion and JavaScript from Method 1. The four-line snippet works reliably, doesn't depend on the Elementor version, and closes the issue completely.

Start with the simplest option: open the editor, replace Accordion with Toggle, and check if the behavior suits you. If not, go back to the snippet. Five minutes, and the accordion looks exactly as you intended.