Accordion element in Elementor closed at the beginning

PageBuilder Elementor comes with a lot of handy widgets by default. One of them is the „Toggle“ and „Accordion“ widget.

What is the difference between the toggle and the Accordion widget?

The toggle widget opens each element individually. You can have all elements open at the same time.

The Accordion widget closes all other elements when you open one. By default, the first element of the Accordion is open. But sometimes you want to have all Accordion elements closed from the beginning. This can be done with a small script.

In the following video I show you how it works!

How to display all Accordion elements closed

To show all Accordion elements closed when entering the page, you just have to place an HTML widget anywhere and insert the following code. I usually place it just below the Accordion (the visitor to the web page will not see this element).

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

Then save the page and the Accordion elements are closed.