Elementor Close Accordion By Default On Page Load (Works)

Elementor Close Accordion By Default On Page Load (Works)

Just launched! Checkout the CSS Course 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() {
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);
});
});
</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.

<script>
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';
})
});
});
</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

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

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.