Elementor

All items closed on page load for the Elementor Accordion widget

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

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

 

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

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

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

    1. 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?

    1. Sniffle Valve

      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.

    1. Sniffle Valve

      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

    1. Sniffle Valve

      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

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

        1. Sniffle Valve

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

    1. Sniffle Valve

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

Leave a Comment

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