How to Close Elementor Accordion by Default (3 Methods)

By default, Elementor’s Accordion widget always opens the first tab when the page loads. For FAQ sections, feature lists, or any content where you want all tabs collapsed initially, this is a problem.

Here are three ways to fix it, from quickest to most robust.

Method 1: Inline JavaScript (Quick Fix)

Add an HTML widget anywhere on the page with this code:

<,script>,
document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    document.querySelectorAll('.elementor-accordion .elementor-tab-title').forEach(function(el) {
      el.classList.remove('elementor-active'),
    }),
    document.querySelectorAll('.elementor-accordion .elementor-tab-content').forEach(function(el) {
      el.style.display = 'none',
    }),
  }, 100),
}),
<,/script>,

This removes the “active” class from all accordion tabs after the page loads, collapsing them. The 100ms delay ensures Elementor has finished rendering before the script runs.

Pros: Works immediately, no theme file editing required.
Cons: Runs on every page where you add it. Users may see a brief flash of the open tab before it collapses.

Method 2: Functions.php (Site-Wide)

Add this to your theme’s functions.php file (or a custom plugin) to apply the fix across your entire site:

function close_elementor_accordions() {
  if ( ! defined('ELEMENTOR_VERSION') ) return,
  ?>,
  <,script>,
  document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
      document.querySelectorAll('.elementor-accordion .elementor-tab-title').forEach(function(el) {
        el.classList.remove('elementor-active'),
      }),
      document.querySelectorAll('.elementor-accordion .elementor-tab-content').forEach(function(el) {
        el.style.display = 'none',
      }),
    }, 100),
  }),
  <,/script>,
  <,?php
}
add_action( 'wp_footer', 'close_elementor_accordions', 99 ),

This loads the script in the footer on every page, but only when Elementor is active. Using priority 99 ensures it runs after Elementor’s own scripts.

Pros: Applies to all accordions site-wide. One-time setup.
Cons: Still a JavaScript solution (brief visual flash possible). Survives only if you keep the same theme.

Method 3: CSS-Only (No Flash, Best Performance)

For the cleanest solution, use CSS to hide the first tab’s content by default:

.elementor-accordion .elementor-tab-title {
  pointer-events: auto,
}
.elementor-accordion .elementor-tab-title.elementor-active {
  /* Remove default active styling */
}
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-content {
  display: none !important,
}
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-title {
  /* Override active state for first item */
}

Add this in Elementor → Custom CSS (Pro) or in your theme’s stylesheet. However, note that Elementor applies the active class via JavaScript on load, so a pure CSS approach may not fully work without the JS fix above.

Our recommendation: Use Method 2 for a clean, site-wide solution. If you’re using a child theme, this persists through Elementor and theme updates.

Why This Matters for UX

Accordion sections are commonly used for:

• FAQ sections, visitors scan questions, then click to expand answers they care about
• Feature comparisons, keeps the page compact while providing detail on demand
• Long-form content, lets pages rank for SEO (content is in the DOM) without overwhelming visitors visually

When the first tab is open by default, it defeats the purpose. Visitors expect to choose which section to read, not be forced into the first one.

Elementor Toggle vs Accordion

Elementor has two similar widgets: Accordion and Toggle. The key difference:

• Accordion: First item open by default. Only one item can be open at a time. Clicking a new item closes the previous one.
• Toggle: All items closed by default. Multiple items can be open simultaneously.

If you want all items closed by default and don’t need the “one at a time” behavior, the Toggle widget might be a better choice, no code needed. But if you want the accordion behavior (one open at a time) with everything closed initially, you need the JavaScript fix above.

Building a WordPress site with Elementor? We’ve built hundreds of Elementor sites and know every trick in the book. Let’s talk about your project.