How to Set the Elementor Accordion Widget Closed by Default

Updated: March 3, 2022

Elementor comes with an Accordion widget. Along with the Toggle widget, the Accordion widget is great to create sections like FAQ or the similar ones. When working with the Accordion widget, you can add as many items as you want. By default, the first item of the accordion is set to open and Elementor offers no default setting to make it closed. For some users, it is a bit annoying as the main purpose of adding accordion is to hide information and requires user interaction (clicking an accordion item) to display the information.

So, how to set all accordion items closed by default? You can use the following JavaScript to do so.

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

You can use HTML widget to use the code above. Simply drag the HTML widget and place it right above the Accordion widget. Paste the code to the HTML Code field on the settings panel once the HTML widget is added

That’s it. You can update your page once you are done editing other elements.

If you have multiple accordions on your website and want to make them all closed by default, you can use a custom code instead. To do so, go to Elementor -> Custom Code on your WordPress dashboard. Click the Add new button to add a new custom code.

Give your custom code a name and paste the code. On the Location section, you can choose whether header, footer, or body. Your code will work at any location. Click the Publish button to apply the code.

Try to reload one of the pages on your website that contains an accordion to check the result.

While the Accordion is useful to create an FAQ section, you can only add the text content. Plus, there is no option to add the content from a template. You can only add the content manually using the offered classic editor. If you need to add an image accordion section to your page, you can use Elementor add-ons like JetElements and JetTabs.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

20 thoughts on “How to Set the Elementor Accordion Widget Closed by Default”

  1. @Jason,

    yep, no effect at all! May be with elemtor pro it works but not with free version and not on of course not on mobile devices.
    sad

    Reply
  2. I have used this code for some time now and it has worked flawlessly! I just upgraded to Elementor v3.5.6 and Pro v3.6.3 and for some reason it doesn’t seem to be working anymore. Is there something in this update that is causing the issue? Maybe it’s just my site…

    Reply
  3. How do you make the second accordian item only show?
    BTW for the people having issues with this blog’s code, here’s a code that works:

    Here’s the correct code: /* Hides the first accordion item */
    .elementor-accordion .elementor-accordion-item:first-child {
    display: none;
    }

    Reply
  4. Hi,
    The solution is here:
    You should change “” to ” – End” while creating the code, in select field.
    Then it is working 🙂
    Also “Always load jQuery” – you can leave unchecked.
    PS. This is the only method. A trick with widget does not work.

    Reply
  5. for all tabs to be closed on the entire page, you can simply implement it in the “functions.php”:

    function jquerytools_scripts() {
    wp_register_script(‘jquerytools’, get_template_directory_uri().’/js/start_closed_tab.js’, array(),”, false);
    wp_enqueue_script(‘jquerytools’);
    }
    add_action( ‘wp_enqueue_scripts’, ‘jquerytools_scripts’ );

    and in “start_closed_tab.js”:

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

    of course, you can adapt your names…copy “/js/start_closed_tab.js” and update functions.php on the server.

    Reply

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.