How to Make Accordion Closed by Default in Elementor

Contents

Default Accordion State in Elementor
Adjust Accordion Settings
Advanced Accordion Control
Improving Accordion UX
Customize Accordion Widget
Useful Links
Conclusion

Learning how to make accordion closed by default in Elementor can significantly improve the user experience of your website. By ensuring the content stays hidden until the user interacts, you keep your layouts clean, focused, and more accessible to all device users.

Understanding Default Accordion State in Elementor

Elementor's accordion widget typically keeps the first item open by default. This setting is intended for easy content discovery, but it may not suit every design goal, especially for more compact or structured layouts.

By default, Elementor assumes users want immediate visibility of the first content block. However, there are many cases—like FAQs, technical documentation, or product features—where keeping all sections closed until user interaction is more appropriate.

To achieve a closed-by-default effect, you'll need to customize the widget beyond the basic interface using JavaScript or CSS enhancements.

Adjusting Elementor Accordion Settings

Unfortunately, there isn't a direct toggle in the native settings for keeping all accordion items closed by default. However, with a small script or a CSS tweak, you can override this behavior effectively and safely.

Method 1: Custom JavaScript

Drag and drop the Accordion widget into your section using Elementor.
Ensure no tab is active. You can do this by clicking again on an open tab to close it before saving.
Add a new HTML widget directly below or within the same section as your accordion.
Paste the following jQuery script inside the HTML widget:

<script>

jQuery(document).ready(function($){

  $('.elementor-accordion .elementor-tab-title').removeClass('elementor-active');

  $('.elementor-accordion .elementor-tab-content').css('display','none');

});

</script>

⚡ This code depends on jQuery. Make sure your theme or page supports jQuery before using this snippet. Elementor typically loads it by default, but custom themes might not.

Method 2: CSS Only (for style, not behavior)

If you simply want to hide the content visually (though technically still open in interaction logic), use this CSS code:

<style>

.elementor-accordion .elementor-tab-content {

  display: none;

}

</style>

💡 This approach does not actually collapse the accordion logically. It's useful only for presentation purposes and doesn't block the first panel from being functionally open.

Advanced Accordion Control in Elementor

For more flexible control and enhanced accordion functionality, consider using third-party Elementor add-ons. These plugins offer advanced accordion settings and can help you control the default accordion state in Elementor without writing custom code.

Elementor Pro's Toggle Widget: An alternative widget that allows better control over open/close states.
Essential Addons: Offers advanced accordion and toggle functionality with deep customization.
Happy Addons: Includes flexible toggle behaviors and animations for better UX.

These tools let you hide accordion content initially, change icons, and manage open behavior more precisely.

Improving Accordion UX and Interaction

Collapsing all panels by default is a smart tactic when dealing with dense or optional content. It allows users to explore only what they find relevant and avoids information overload on page load.

Encourage exploration of content at the user's pace, giving them control.
Prevent content overload, especially when dealing with FAQs, tutorials, or documentation.
Control attention flow by leading users through content interactively.
Improve performance on mobile devices by reducing initial content rendering.

✅ Keep accordion collapsed for a cleaner and more modern design impression, especially on mobile or one-page layouts.

Extra Tips to Customize Accordion Widget in Elementor

When customizing accordion behavior and layout, small changes can have a big impact on usability and design coherence.

Toggle behavior. Use add-ons or script logic to allow either one or multiple panels open at a time.

Icons and indicators. Choose intuitive icons for opened and closed states to improve user clarity and interaction feedback.

Spacing and animation. Adjust padding, margins, and transition effects using Elementor layout customization settings to enhance interaction smoothness.

Trigger with URL. Some advanced setups allow you to link to a specific panel via a URL hash, which is useful in documentation or onboarding flows.

Responsive settings. Always preview your accordion behavior across devices to ensure the close-by-default state works consistently.

Useful Links

Accordion Widget – Elementor Official Documentation – Learn how to use and customize the Accordion widget in Elementor, including adding items, setting icons, and more.

Accordion Widget with Nested Elements – Discover how to add and manage nested elements within the Accordion widget for more complex layouts.

Elementor Close Accordion By Default On Page Load – A guide on how to close all Accordion items by default using JavaScript, ensuring a cleaner initial view for users.

Enhance Your Elementor with Powerful Widgets!

Elfsight created dozens of useful widgets to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Elementor!

No Results

See all Widgets

Conclusion

Now you know how to keep accordion closed by default in Elementor using JavaScript tweaks, CSS styling, or powerful third-party plugins. Whether your goal is improved mobile UX, better focus, or a minimalist look, this simple customization helps create a smoother, cleaner user experience tailored to your audience's needs.