How to Close the Accordion in Elementor by Default?

Elementor has become the most popular page builder plugin in the WordPress community, and we frequently use it in our company’s client projects.

In today’s post, I’m sharing a small trick that will help you give a unique look to Elementor accordions.

Make Accordions Closed by Default

It’s very common for a client to ask you “to put” information on accordions. It’s often used for SEO purposes.

The page needs to have a certain number of words, but there’s no way that so much text will fit.

The problem is that by default, in Elementor, the first tab in the accordion is always open.

And some clients hate that!

Is there a solution? Of course, you just paste the following code in the HTML area anywhere you want on the page:

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

And voila! It closes by default. Nothing else to do. Easy, useful, quick, and for the whole family. We hope this serves you well!

Additional Method via Functions File

Go to the functions.php file and add the following code:

function elementor_accordion_title() { ?>
<script>
jQuery(document).ready(function() {
  jQuery( ‘.elementor-accordion .elementor-tab-title’ ).removeClass( ‘elementor-active’ );
  jQuery( ‘.elementor-accordion .elementor-tab-content’ ).css( ‘display’, ‘none’ );
});
</script>
<?php }
add_action( ‘wp_footer’, ‘elementor_accordion_title’, 99 );