Elementor comes with an Accordion widget. Along with the Toggle widget, the Accordion widget is great to create sections like FAQ or the similar ones. When working with the Accordion widget, you can add as many items as you want. By default, the first item of the accordion is set to open and Elementor offers no default setting to make it closed. For some users, it is a bit annoying as the main purpose of adding accordion is to hide information and requires user interaction (clicking an accordion item) to display the information.
So, how to set all accordion items closed by default? You can use the following JavaScript to do so.
<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-content').css('display', 'none'); }, delay);
});
</script>You can use HTML widget to use the code above. Simply drag the HTML widget and place it right above the Accordion widget. Paste the code to the HTML Code field on the settings panel once the HTML widget is added
That’s it. You can update your page once you are done editing other elements.
If you have multiple accordions on your website and want to make them all closed by default, you can use a custom code instead. To do so, go to Elementor -> Custom Code on your WordPress dashboard. Click the Add new button to add a new custom code.
Give your custom code a name and paste the code. On the Location section, you can choose whether header, footer, or body. Your code will work at any location. Click the Publish button to apply the code.
Try to reload one of the pages on your website that contains an accordion to check the result.
While the Accordion is useful to create an FAQ section, you can only add the text content. Plus, there is no option to add the content from a template. You can only add the content manually using the offered classic editor. If you need to add an image accordion section to your page, you can use Elementor add-ons like JetElements and JetTabs.
47 thoughts on “How to Set the Elementor Accordion Widget Closed by Default”
The default setting of Accordion widget is also a bit annoying for me. Thanks for sharing the trick
You are very welcome, Alexey. Great our article could help
Hi,
thank you for the post. The Javascript isn’t working…. (notedly just in Mobile only)
I found the right Javascript code what is for every responsively browser:
https://digitalfreelancing.eu/how-to-close-by-default-the-accordion-in-elementor/
Simply doesn’t work at all. I did exactly as the tutorial describes and I’m surely a power user/coder. No effect.
Hi Jason,
We have just updated the code. It works perfectly now 🙂
@Jason,
yep, no effect at all! May be with elemtor pro it works but not with free version and not on of course not on mobile devices.
sad
Hi Andy,
We have just updated the code. Please try again 🙂
Doesn’t work, thanks for wasting my time!
Ben,
We have just updated the code. You can try again
Hi , thank for your code, in my case , only work with firefox, not with google chrome
I have used this code for some time now and it has worked flawlessly! I just upgraded to Elementor v3.5.6 and Pro v3.6.3 and for some reason it doesn’t seem to be working anymore. Is there something in this update that is causing the issue? Maybe it’s just my site…
I have the same problem. The code works only when I am logged in. Elementor 3.6.2
Hi, I’m using Elementor Free version and script works well with firefox but not with google chrome
How do you make the second accordian item only show?
BTW for the people having issues with this blog’s code, here’s a code that works:
Here’s the correct code: /* Hides the first accordion item */
.elementor-accordion .elementor-accordion-item:first-child {
display: none;
}
Hi
The code don’t work on my site, it used to work on one of my sites but in the new site it don’t work. I don’t know what happen
Has anyone else had the issue where Elementor keeps stripping out the script and /script tags?
Hi,
The solution is here:
You should change “” to ” – End” while creating the code, in select field.
Then it is working 🙂
Also “Always load jQuery” – you can leave unchecked.
PS. This is the only method. A trick with widget does not work.
Im still confused. Pls assist.
This worked great on my site! Thanks for sharing.
Does not work, unfortunately.
for all tabs to be closed on the entire page, you can simply implement it in the “functions.php”:
function jquerytools_scripts() {
wp_register_script(‘jquerytools’, get_template_directory_uri().’/js/start_closed_tab.js’, array(),”, false);
wp_enqueue_script(‘jquerytools’);
}
add_action( ‘wp_enqueue_scripts’, ‘jquerytools_scripts’ );
and in “start_closed_tab.js”:
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$(‘.elementor-tab-title’).removeClass(‘elementor-active’);
$(‘.elementor-tab-content’).css(‘display’, ‘none’);}, delay);
});
of course, you can adapt your names…copy “/js/start_closed_tab.js” and update functions.php on the server.
Thanks for this!
With the Accordion, is it possible to set an item as open by default other than the first item? For example, on a particular page I would like the second Accordion item to be open by default.
Can I do this on only 1 accordion on my page?
I have a page with 4 separate accordion widgets, and I want to apply this to only 1 of them
Works, thanks!
For anyone not having luck with the code in this article (like I was), it’s likely because the accordion has not been rendered yet when the code fires. Use the below script instead which doesn’t fire until the page is fully loaded.
jQuery(window).on(‘load’,function() {
jQuery(‘.elementor-tab-title’).removeClass(‘elementor-active’);
jQuery(‘.elementor-tab-content’).css(‘display’, ‘none’);
});
Massive thanks for the addition, Derek!
This code used to work great, but hasn’t been lately. Your tweak to run it on load, Derek, makes it work again. Thanks so much!
Or even just increasing the delay amount also handles the case.
THANKS guys! 🙂
anyone having problems with this, you can simply set the delay to 1000 from 100 so it fires after it renders:
var delay = 1000;
Worked for me. Thanks
Thanks Noel, now it works!
This helped! Thank you!
Thank you for this, it worked perfectly
This is just what I needed – thank you so much!
Or at least I thought it was working – it looks to be ok on desktop but the accordions are all expanded on tablet and mobile at first view – any ideas? eg. here: https://joyandknowledge.com/activism/bame-leaders-exiting-the-profession/
I am also finding this issue, works perfectly on desktop but still displays open on mobile. Have you found a fix for this?
Did they change this? For me by default they are all closed, I want the first one to be open.
Elementor Pro opens the first one by default. The code samples given here are to close that first item (overriding Elementor).
Thanks for your help
I’d use this code:
setTimeout(_ => {
const first = document.querySelector(‘.elementor-accordion-item:first-child’);
const itemTitle = first.querySelector(‘.elementor-tab-title’);
const itemContent = first.querySelector(‘.elementor-tab-content’);
itemTitle.classList.remove(‘elementor-active’);
itemContent.classList.remove(‘elementor-active’);
itemContent.style.display = ‘none’
}, 200);
Cause: who uses jQuery in 202x?
Not working for me….
Hi,
I did it site wide by using the Custom Code method, and it works great on desktop but I also found that the 1st accordion is still open on the phone.
Do you have a correction for that?
STeve
This is no longer working for me. I did this on a couple of sites but now it doesn’t work anymore. I tried on a new site, in Elementor’s custom code, but also on the page, and nothing. Anybody got a fix? Thank you!
same here.. i guess because of an elementor update.
If this isn’t working, try this. Change:
var delay = 100;
to
var delay = 1000;
My theory: On slower websites the CSS takes extra time to render and the delay isn’t long enough, thus the JS fires too soon. I’m not a professional coder but it worked for me 🙂
Thanks for sharing, but it does not work for the toggle element.