Easy Methods to Set Elementor Accordion Default Closed

Sharing Is Caring:

Elementor’s accordion widget is a fantastic tool for web designers looking to add collapsible texts or FAQs to their web pages, enhancing the overall user experience.

However, sometimes you might want to to Set Elementor Accordion Default Closed, which isn’t a straightforward setting in Elementor right out of the box.

If you’ve been scratching your head over how to achieve this, fear not! This guide will walk you through three different methods to set your Elementor accordion closed by default, ensuring a neat and tidy appearance upon page load.

Method 1: Using Custom CSS

Step 1: Duplicate the First Accordion Item

Before we begin, start by duplicating the very first item in your accordion. This step is crucial as it lays the foundation for the custom CSS code to function correctly.

Step 2: Copy the Custom CSS Code

Next, you will have to paste the following CSS code to hide the first Elementor accordion. (It will hide the first child of elementor accordion).

.elementor-accordion .elementor-accordion-item:nth-child(1) {
display: none;
}
.elementor-accordion .elementor-accordion-item:nth-child(2) {
border-top: 1px solid #D4DFF2C7 !important;
}

Step 3: Paste the CSS Code

Navigate to the ‘Advanced’ Settings of elementor accordion widget. at bottom you will find a section labeled ‘Custom CSS‘. Paste the code you previously copied into this box.

It’s important to note that the “Custom CSS” option is available only in Elementor Pro. If you’re using the elementor free version, you’ll need to upgrade elementor to access this feature. We recommend purchasing a license through the link provided on the resources page.

After pasting the code, you will notice that the first item of your accordion is hidden, which will make the entire accordion appear closed by default.

Method 2: Elementor Accordion Default Closed Using JavaScript

If the CSS method doesn’t work for you or if you prefer a different approach, JavaScript offers another solution.

Step 1: Obtain the JavaScript Code

Similar to the CSS method, you will need to copy a JavaScript Code Snippet first.

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

Step 2: Place an HTML Widget

Go back to your Elementor editor and drag an HTML Widget to your page. It’s essential to place this widget right above your accordion for the code to work effectively.

Step 3: Paste the JavaScript Code

After placing the HTML widget, paste the JavaScript Code into it. Save your changes, then click ‘Preview’. You will notice that your accordion stays closed by default when the page loads.

Method 3: Using Elements Kit Accordion Widget

Elementor Accordion Default Closed

For those looking for the simplest solution, the Elements Kit Addon for Elementor comes with an easy one-click option to set accordion closed by default.

First, you will need to install and activate the Elements Kit Addon for Elementor Plugin. Once activated, you will see a simple toggle in the Elements Kit accordion widget settings. This toggle allows you to keep the accordion closed by default.

Conclusion

Each of these methods offers a straightforward solution to ensure your Elementor accordions remain closed upon page load, enhancing the look and feel of your website.
Whether you prefer working with custom CSS/JavaScript or prefer the convenience of addons like Elements Kit, there is a solution that suits your requirements.

That’s all for now. We hope this guide has been beneficial to you.

Scroll to Top