Table of Contents
There are many tutorials online showing you how to close the Elementor accordion by default, on page load. Many of them stopped working, after Elementor changed their JavaScript load order in a recent update.
Most code snippets you will find online also don't respect accessibility standards: they don't update the aria attributes to their proper values, or the tabindex value. My code here takes care of that as well.
The code you will find here is tested working and will successfully close your Elementor accordion by default, on page load.
Elementor Close Accordion by default code
Simply copy paste the code below in an HTML element, on the same page, to close all the Elementor accordions on your page by default, on page load.
<style class="accordion-closed-on-load">
body:not(.elementor-editor-active) .elementor-widget-accordion .elementor-tab-content {
display: none!important;
}
</style>
<script>
window.addEventListener('load', function() {
setTimeout(function(){
document.querySelector('.accordion-closed-on-load').remove();
let accordionsElems = document.querySelectorAll('.elementor-widget-accordion')
accordionsElems.forEach(e => {
let activeTitle = e.querySelector('.elementor-tab-title.elementor-active');
let activeContent = e.querySelector('.elementor-tab-content.elementor-active')
jQuery(activeContent).hide();
activeTitle.classList.remove('elementor-active');
activeContent.classList.remove('elementor-active');
activeContent.setAttribute('hidden','hidden');
activeTitle.setAttribute('aria-expanded',false);
activeTitle.setAttribute('aria-selected',false);
activeTitle.setAttribute('tabindex',-1);
});
},100);
});
</script>
Close Elementor Accordion by default in a popup
If you want to close an Accordion that's in a popup, simply add this code, in an HTML element.
Importantly, the HTML element needs to be inside the popup.
<script>
(function() {
let tester = 0;
let myTimeout = setInterval(function() {
tester++;
if (tester < 30) {
let accordionsElems = document.querySelectorAll('.elementor-popup-modal .elementor-widget-accordion');
if (accordionsElems) {
accordionsElems.forEach(e => {
let activeTitle = e.querySelector('.elementor-tab-title.elementor-active');
let activeContent = e.querySelector('.elementor-tab-content.elementor-active');
if (activeTitle) {
jQuery(activeContent).hide();
activeTitle.classList.remove('elementor-active');
activeContent.classList.remove('elementor-active');
activeContent.setAttribute('hidden', 'hidden');
activeTitle.setAttribute('aria-expanded', false);
activeTitle.setAttribute('aria-selected', false);
activeTitle.setAttribute('tabindex', -1);
clearInterval(myTimeout);
}
});
}
} else {
clearInterval(myTimeout);
}
}, 100);
}());
</script>
Close the mobile Elementor Tab Accordion by default, on page load
The Elementor Tabs element also becomes an accordion, on mobile viewports. To close that accordion by default, use the code below.
This is the code for the old Elementor Tabs element
<script>
/* Automatically close the mobile accordion from the tabs element on mobile */
window.addEventListener('load', function() {
setTimeout(function(){
if (window.innerWidth > 767){
return;
}
let tabsElems = document.querySelectorAll('.elementor-widget-tabs')
tabsElems.forEach(e => {
let activeTitle = e.querySelector('.elementor-tab-mobile-title.elementor-active');
let activeContent = e.querySelector('.elementor-tab-content.elementor-active')
activeContent.style.display = 'none';
activeTitle.classList.remove('elementor-active');
activeContent.classList.remove('elementor-active');
activeContent.setAttribute('hidden','hidden');
activeTitle.setAttribute('aria-expanded',false);
activeTitle.setAttribute('aria-selected',false);
activeTitle.setAttribute('tabindex',-1);
activeTitle.addEventListener('click',function(){
activeTitle.classList.add('elementor-active');
activeContent.classList.add('elementor-active');
activeContent.removeAttribute('hidden');
activeTitle.setAttribute('aria-expanded',true);
activeTitle.setAttribute('aria-selected',true);
activeTitle.setAttribute('tabindex',0);
activeContent.style.display = 'block';
}, {once:true})
});
},100);
});
</script>
This is the code for the new Elementor tabs element
<script>
/* Automatically close the mobile accordion from the tabs element on mobile */
window.addEventListener('load', function() {
setTimeout(function(){
if (window.innerWidth > 767){
return;
}
let tabsElems = document.querySelectorAll('.e-n-tabs')
tabsElems.forEach(e => {
let activeTitle = e.querySelector('.e-n-tabs-content .e-n-tab-title.e-active');
let activeContent = e.querySelector('.e-con.e-active')
activeContent.style.display = 'none';
activeTitle.classList.remove('e-active');
activeContent.classList.remove('e-active');
activeContent.setAttribute('hidden','hidden');
activeTitle.setAttribute('aria-expanded',false);
activeTitle.setAttribute('aria-selected',false);
activeTitle.setAttribute('tabindex',-1);
activeTitle.addEventListener('click',function(){
activeTitle.classList.add('e-active');
activeContent.classList.add('e-active');
activeContent.removeAttribute('hidden');
activeTitle.setAttribute('aria-expanded',true);
activeTitle.setAttribute('aria-selected',true);
activeTitle.setAttribute('tabindex',0);
activeContent.style.display = 'flex';
}, {once:true})
});
},100);
});
</script>
Extra: to close the new Tab element on mobile AND desktop, use this code:
<script>
/* Automatically close the mobile accordion from the tabs element on mobile */
window.addEventListener('load', function() {
setTimeout(function(){
let tabsElems = document.querySelectorAll('.e-n-tabs')
tabsElems.forEach(e => {
let activeTitles = e.querySelectorAll('.e-n-tab-title.e-active');
let activeContent = e.querySelector('.e-con.e-active')
activeContent.style.display = 'none';
activeTitles.forEach(activeTitle => activeTitle.classList.remove('e-active'));
activeContent.classList.remove('e-active');
activeContent.setAttribute('hidden', 'hidden');
activeTitles.forEach(activeTitle => activeTitle.setAttribute('aria-expanded', false));
activeTitles.forEach(activeTitle => activeTitle.setAttribute('aria-selected', false));
activeTitles.forEach(activeTitle => activeTitle.setAttribute('tabindex', -1));
activeTitles.forEach(activeTitle => {
activeTitle.addEventListener('click', function () {
activeTitles.forEach(activeTitle => activeTitle.classList.add('e-active'));
activeContent.classList.add('e-active');
activeContent.removeAttribute('hidden');
activeTitles.forEach(activeTitle => activeTitle.setAttribute('aria-expanded', true));
activeTitles.forEach(activeTitle => activeTitle.setAttribute('aria-selected', true));
activeTitles.forEach(activeTitle => activeTitle.setAttribute('tabindex', 0));
activeContent.style.display = 'flex';
}, { once: true })
});
});
},100);
});
</script>
Finally, enjoy your closed by default Elementor Accordion!
I really hope you found this tutorial useful.
Cheers!
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
Looking for something else? Search across 2445 Elements right here:
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
Comments
34 Responses
Thanks a lot for sharing this useful code.
Welcome!
I perused every other site which claimed their code would work, but none of them did. That is until I used your code and it worked like a charm! I cannot express to you with words alone what it means to know there are coders with the talents and wisdom few others possess. Thank you!
Welcome Steven, and thank you greatly for these kind words. Really appreciated.
Hello, thank you for the pieces of codes. I've been trying that last code on my staging site which should close the accordions only on mobile, but it is also closing them on desktop.. Any thoughts? Thanks
Hey!
Wrap the whole code inbetween a window width check, as follow:
<script>
if (window.innerWidth < 1024){
//rest of the code here
}
</script>
Hey thanks for your help but it's not working/closing the tabs. I put it this way:
if (window.innerWidth < 1024){
window.addEventListener('load', function() {
let tabsElems = document.querySelectorAll('.elementor-widget-tabs')
tabsElems.forEach(e => {
let activeTitle = e.querySelector('.elementor-tab-mobile-title.elementor-active');
let activeContent = e.querySelector('.elementor-tab-content.elementor-active')
activeContent.style.display = 'none';
activeTitle.classList.remove('elementor-active');
activeContent.classList.remove('elementor-active');
activeContent.setAttribute('hidden','hidden');
activeTitle.setAttribute('aria-expanded',false);
activeTitle.setAttribute('aria-selected',false);
activeTitle.setAttribute('tabindex',-1);
activeTitle.addEventListener('click',function(){
activeTitle.classList.add('elementor-active');
activeContent.classList.add('elementor-active');
activeContent.removeAttribute('hidden');
activeTitle.setAttribute('aria-expanded',true);
activeTitle.setAttribute('aria-selected',true);
activeTitle.setAttribute('tabindex',0);
activeContent.style.display = 'block';
})
});
});
}
For some reason, after I clicked "post comment" it removed the script tags, that's why you don't see them. if you don't mind, please give me the whole script that I could copy/paste, or maybe update the code in the page. I'd really appreciate it.
Yea that's okay... you need the code for the accordion though, not the code for the tabs. Use the first snippet provided, then wrap the code in between the window width check as I explained already. Should work fine!
Thank you so much for this! I still have one tiny problem that I just can't get sorted out, I have two pages on a website that both contain two accordions. I have put the script in on both pages, but every time I open the page, the first site I go on everything's closed and the second page they are both open. Doesn't matter which one I go on first. I would really appreciate any thoughts!
Try this code instead, let me know if it works better:
<script> window.addEventListener('load', function() { setTimeout(function(){ let accordionsElems = document.querySelectorAll('.elementor-widget-accordion') accordionsElems.forEach(e => { let activeTitle = e.querySelector('.elementor-tab-title.elementor-active'); let activeContent = e.querySelector('.elementor-tab-content.elementor-active') jQuery(activeContent).slideUp(); activeTitle.classList.remove('elementor-active'); activeContent.classList.remove('elementor-active'); activeContent.setAttribute('hidden','hidden'); activeTitle.setAttribute('aria-expanded',false); activeTitle.setAttribute('aria-selected',false); activeTitle.setAttribute('tabindex',-1); }); },1600); }); </script>hello thanks for the code (i'm using the first one) but although it does work the accordion appears open for a split second and then closes... is there anyway to stop this from happening?
Hey Antoni!
Indeed that's how this code works. It closes the accordion programmatically after the page has fully loaded.
With the proper CSS you should avoid this but then it's starting to become really complex. Ideally you would have the accordion below the fold, so that by the time the user scrolls to it, it's closed already.
Hey Antoni just to let you know I updated the code, and now it should prevent any FOUC.
Cheers!
many thanks! your works save for me too many time! love you.
Welcome Mihail! Glad to be of help.
Do you know how to do this but for Tabs? I really need to show tabs but that none of them are opened un til you click on them.
Thanks!
Greetings Dani!
Yes indeed, and it's already a part of the tutorial! See the "Close the mobile Elementor Tab Accordion by default, on page load" part.
Cheers!
I can't make it work 🙁
Maybe is it related to the last Elementor update?
I found this video where in the comments it says that: https://www.youtube.com/watch?v=-lbqvQhxNJQ&t=51s
Thanks for the help!
Are you using the new Tabs element that allows for adding element directly within it? Or the normal, old tabs element?
The new one
I updated the tutorial with the code for the new tabs element!
What am I doing wrong??? It's still not working!
Look at this screenshot: https://qepi.nodocomun.org/s/sdaRxwAsQK6DCbx
Would you have a link to your page?
https://dev.eblida.org
It's working perfectly fine for me! Keep in mind the Tabs element is only an accordion on mobile, so the code makes it closed on mobile only...
Hum, any way to close it as well on desktop as well please?
And I can't see it working fine on my mobile. Do you have a demo working?
I added the code to close it on both mobile and desktop.
Cheers!
Thanks a lot but still it doesn't wanna work... Don't know why!
Works for me! I visit your website, the tabs element is closed by default on page load... only on click does it shows the content!
Hi, I'm trying to close tabs (the old tab widget) on mobile but the code for the mobile doesn't work for me. I'm trying both the old and the new tab code but nothing works. I have Elementor pro and the Elementor version is 3.10. I'm not using the container version.
Thanks in advance, Odeya
Do you have a link to the page where it's not working?
Hi Maxime,
It seams to work now! Thanks.
I put the HTML underneath the firs tab widget.
Here is the link to the page
https://dovevlavie.ussl.co.il/awards-honors/
I used the code for the mobile.
In order to see the tabs, you should click on "show more awards" button.
Thanks again.