How To Add An Auto-Closing Accordion Section In Elementor

If you're using Elementor, you may be wondering how to make the accordion widget that collapses automatically. As a toggle or FAQ section, you can use Elementor's own accordion block. Your accordion can hold numerous objects. When you refresh the page, it will always open with the first item selected as the default. Elementor has no features that allow you to control it. You can't turn it off in the Elementor dashboard. For your website, you may choose to close the items.

We'll show you how to make Elementor's Accordion widget close automatically by following the steps in this post.

Accordion Widget Setup

In the default state, the accordion item can be closed in a variety of ways. Alternatively, the Absolute Addons Advanced Accordion widget can be used to accomplish the same task with a single mouse click.

Manual Method

Adding JavaScript to the Elementor accordion widget is the only way to do it manually. Add the accordion widget to a new page and begin adding your products.

Next, add an HTML coding block before the accordion widget.

You to add the following JavaScript code in the HTML block in the same section before the accordion.

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

Now save the task by clicking on "update" and check on a live page. By now, your accordion will be closed by default.

Absolute Addons Plugin

If you do not feel comfortable adding code, you can install the Absolute Addons plugin and then add the Advance Accordion Widget.

Go to plugins and navigate to Add New.

Now, look for the plugin called "Absolute Addons". When you find it, click install and then activate the plugins.

Create a section in Elementor by clicking the "+" icon and then searching for Advance Accordion in the block section of the left bar after you've installed and activated the plugin. Drop the Advance Accordion block into the new section you just made.

You can now choose the Accordion style from the drop-down menu under the Content tab. The Advance Accordion area has thirteen unique and professional-looking styles to choose from. You have a wide range of options when it comes to fashion.

In the Accordion Controller option, you'll see the Expand First Time options. As long as you keep the first item enabled, you'll preserve its extended state. Close the first item by disabling the option.

Wrapping Up

Elementor allows you to set the Accordion widget to be closed by default after following the steps. Now, you can use Elementor Cloud to host your website with more and better security and convenience. Follow our other Elementor Tutorials for adding a new wave to your further web development projects.