Simple & Easy Help
for WordPress Beginners

All items closed on page load for the Elementor Accordion widget

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this quick tip to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this quick tip, book a one-on-one online training session

Update 4: Friday 08 DEC 2017

Thanks again to Zulfikar Nore for coming up with a fix! The updated code is posted below.

Update 3: Friday 08 DEC 2017

It has been noted that the updated code for Elementor 1.8 and above creates an unwanted side effect. If the Elementor Tabs widget is used anywhere on the site, the contents of the first tab will not be displayed nor the tabs outline. A fix is being investigated and will be posted here when tested and available. In the meantime, do NOT use this code if you also have the Tabs widget on your site.

Update 2: Thursday 09 NOV 2017

The updated code for this to work in Elementor 1.8 and above is located below. Thanks again to Zulfikar Nore.

Update: Thursday 09 NOV 2017

Unfortunately, this no longer works in Elementor 1.8 and above. I will investigate a fix and post back if one is found.

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 );
08 DEC 2017: Updated code for Elementor 1.8 and above


19 thoughts on “All items closed on page load for the Elementor Accordion widget

    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 );

    • 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.

    • 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?

    • 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?

    • 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.

Leave a Comment