Three Ways to Close Elementor’s Accordion Widget by Default

Elementor is a popular page builder for WordPress that allows users to create complex layouts and designs with ease. One of its many widgets is the Accordion widget, which is useful for organizing and presenting information in a compact and user-friendly way. However, by default, Elementor Accordion widgets don’t allow users to close the items. In this article, we will discuss two custom code options and one plugin option to help you close Elementor Accordion items by default.

Thankfully, there are three ways to solve this issue: custom jQuery code, custom CSS code or by using another plugin.

If you’re comfortable with using custom code, this is a great option to close Elementor accordion items by default. Here’s an example of the code you can use:

Option 1: Use Custom Code with JQuery

The first option is to use custom code with jQuery. The following code will remove the “elementor-active” class from the Accordion tab titles and hide the tab contents when the page loads:

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

To use this code, go to the page where the Accordion widget is added, click on the Edit with Elementor button, and add a new HTML widget to the page. Paste the above code into the widget and update the page. This will close all the Accordion items by default.

Option 2: Use Custom Code with CSS

Another option is to use custom code with CSS. Add the following code to your website’s CSS file:

.elementor-accordion .elementor-tab-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.elementor-accordion .elementor-tab-title.elementor-active + .elementor-tab-content {
max-height: 100vh;
overflow: visible;
}

This code will set the maximum height of the Accordion item content to 0 and hide the overflow by default. When the user clicks on an Accordion item, the maximum height will change to 100vh and the overflow will become visible, showing the content.

Option 3: Use another Plugin

If you’re not comfortable using custom code, you can use a plugin like Essential Addons for Elementor, which offers an Accordion widget with a toggle option to allow users to open and close items. Simply install the plugin, add the widget to your page, and enable the toggle option in the widget settings.

In conclusion, Elementor Accordion widgets are a great way to present information on your website, but by default, they don’t allow users to close the items. By using custom code or a plugin, you can customize the behavior of the Accordion widget to enhance the user experience on your website.