Elementor Close Accordion By Default On Page Load (Works)

Elementor Close Accordion By Default On Page Load (Works)

Check out our CSS Course, made especially for Elementor users.

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.

Elementor Close Accordion By Default On Page Load (Works) 1

<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:

Checkout the Elementor Addon Finder directly

Comments

34 Responses

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

  2. 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

    1. Hey!

      Wrap the whole code inbetween a window width check, as follow:

      <script>
      if (window.innerWidth < 1024){

      //rest of the code here

      }
      </script>

      1. 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';
        })
        });
        });

        }

  3. 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.

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

  4. 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!

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

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

  6. 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!

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

    2. Are you using the new Tabs element that allows for adding element directly within it? Or the normal, old tabs element?

    3. 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...

      1. And I can't see it working fine on my mobile. Do you have a demo working?

      1. Thanks a lot but still it doesn't wanna work... Don't know why!

    4. 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!

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

Leave a Reply

BRAND NEW

CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.