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

 

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

  1. THANK YOU!
    Very useful, saved me quite some time ^β€Ώ^

    Here is my version of it Β»
    ———————————–
    function elementor_accordion_title() {
    if(is_page(44)){
    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.
      Cheers!
      Lyle

    • 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 πŸ™‚
      Cheers!
      Lyle

  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.
      Cheers!
      Lyle

  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.
      Cheers!
      Lyle

  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.

    • 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/
      Cheers!
      Lyle

  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!
    Julian

    • 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?
      Cheers!
      Lyle

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

Leave a Comment