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 );
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 );
Thanks Ben, and also for your version 🙂
Thanks so much!
You’re welcome Bob! 🙂
Cheers!
Lyle
Sadly this is broken since 1.8 (same with 1.8.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
Thanks, but not working in version 1.8x
Hi Casper,
Thanks for the heads up on this and see my reply to Bob.
Cheers!
Lyle
Thanks so much Lyle for the quick fix to the 1.8 update.
Wow! Much appreciated.
It is not working for me 🙁
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
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
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
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 Maurice,
The best bet for that is to use the Granular Controls for Elementor plugin.
https://wordpress.org/plugins/granular-controls-for-elementor/
Cheers!
Lyle
Granular controls braked the WordPress widget section in the customizer after latest wordpress update
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.
Cheers!
Lyle
Thank you!
You’re welcome 🙂
Thanks so much for this code. Works great!
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
Thank you!!!!!! Works beautifully 🙂
You’re welcome, Terri 🙂
Good to hear!
Cheers!
Lyle
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
Hi Julian,
I’ll have to look into that as I am not aware of how to do so at the moment.
Cheers!
Lyle
Perfect! It worked amazingly! I put the code into my functions.php file in my child theme though 😀
Hi Ryan,
Good to hear and that you used the functions.php child theme method 🙂
Cheers!
Lyle
Excellent snippet. It works perfectly with Elementor 2.2.4.
Thanks a million!
You’re welcome, Alan 🙂
Cheers!
Lyle
Thank you Mister, it works perfectly! Great Job! 🙂
You’re welcome 🙂
Good to hear is worked for you.
Cheers!
Lyle