Sometimes you would like to have all the items closed on page load when using the Elementor Accordion widget. By default, the first, or top, item is open. Many suggest to use the Elementor Toggle widget instead, but it’s just not the same thing.

Thanks to Zulfikar Nore from WPDevHQ there is an easy solution. Add the following code to a Code Snippet snippet and set the snippet to ‘Run everywhere’.

NOTE: Make sure you click the “Save Changes and Activate” button!

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

Similar Posts


    Very useful, saved me quite some time ^‿^

    Here is my version of it »
    function elementor_accordion_title() {
    echo ”

    jQuery(document).ready(function() {
    jQuery( ‘.elementor-accordion-title’ ).removeClass( ‘active’ );
    jQuery( ‘.elementor-accordion-content’ ).css( ‘display’, ‘none’ );
    } }
    add_action( ‘wp_footer’, ‘elementor_accordion_title’, 99 );

    1. Hi Bob,
      Unfortunately, you are correct 🙁
      I will have a look to see if there is a fix, but in the meantime I will update the post to point this out.
      Thank you for noting this.

    1. Hi Adrian,
      Are you using the updated code? The first code block labeled “Updated code for Elementor 1.8 and above” is the one to use.
      I just tried it on the latest Elementor 1.8.4 and it is working 🙂
      Make sure the code is copied correctly and that you have clicked the “Save Changes and Activate” button in your Code Snippet 🙂

  2. Hi,

    Thank you so much for this fix! However, the 1.8 fix stopped working as soon as I updated to 1.8.8. Any ideas why this could be?

    1. Hi Alex,
      You’re welcome, and a fix is in the works 🙂 I’ll update the page when it becomes available.

  3. HI Lyle.
    This fix works great.
    Wondering if you have a css code for keeping the first TAB closed on mobile.
    I am using Tabs (and embedding accordion within.)
    My first TAB has quite a bit of text… would like to see it closed on load BUT ONLY for mobile responsive version.
    Any ideas?

    1. Hi Lisa,
      Good to hear it worked for you 🙂
      I’m not too sure about how to address your question but I will look into it and post back if I can come up with a solution.

  4. Hi, this is a great function, thanks for it, but is there any fix to make this work with the latest version of Elementor Pro?

    Thanks in advance.

    1. Hi Maurice,
      The best bet for that is to use the Granular Controls for Elementor plugin.

        1. This has been know for a while now. The Granular Controls developer has gone MIA since April and the plugin has been abandoned. I would suggest you try Flexible Elementor Panels.

    1. Hi Maureen,
      You are very welcome and it’s good to hear that it worked for you 🙂
      There is now, however, a very cool plugin that does the same thing and many other nifty tricks, my fave being the one-click exit to dashboard. The plugin is Granular Controls for Elementor and it is one of the very first plugins that I install on all of my sites 🙂 https://wordpress.org/plugins/granular-controls-for-elementor/

  5. Hey Lyle,
    do you know if there is a option in Granular Gontrols to also keep all TABs closed on page load? Or do you maybe have some code ready, which allows that funktion?
    Thanks in advance!

    1. Hi Julian,
      As far as I know there is not setting in Granular Controls to do that and nor do I have any idea what such code may be 🙂
      Out of curiosity, what would be a use case for such a scenario?

      1. Hey Lyle, i want to build something like an expandable section, wich opens on grid width, with 4 tab titles in a row. I used “Anything Elementor” to replace the tab titles by a small image, a headline and some teaser text. Now i would like to have all Tabs closed on page load and expand the tabs by clicking, to the full grid width, with sometimes just more text and sometimes some more images and text.

        1. Hi Julian,
          I’ll have to look into that as I am not aware of how to do so at the moment.

    1. Hi Ryan,
      Good to hear and that you used the functions.php child theme method 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *