Elementor Close Accordion By Default On Page Load (Works)
Get Premium

Elementor Close Accordion By Default On Page Load (Works)

Just Released: 10 Popular Web Hosts Tested In Depth

WordPress Hosting Review

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

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Close Accordion By Default On Page Load (Works) tutorial 
 * Found at this URL https://element.how/elementor-close-accordion-on-page-load/ 
 */ 
</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> 
/* Please login to get the code 
 * The code will be for the Elementor Close Accordion By Default On Page Load (Works) tutorial 
 * Found at this URL https://element.how/elementor-close-accordion-on-page-load/ 
 */ 
</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> 
/* Please login to get the code 
 * The code will be for the Elementor Close Accordion By Default On Page Load (Works) tutorial 
 * Found at this URL https://element.how/elementor-close-accordion-on-page-load/ 
 */ 
</script>

This is the code for the new Elementor tabs element

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Close Accordion By Default On Page Load (Works) tutorial 
 * Found at this URL https://element.how/elementor-close-accordion-on-page-load/ 
 */ 
</script>

Extra: to close the new Tab element on mobile AND desktop, use this code:

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Close Accordion By Default On Page Load (Works) tutorial 
 * Found at this URL https://element.how/elementor-close-accordion-on-page-load/ 
 */ 
</script>

To have this one work on desktop only, add:

if (window.innerWidth < 1025) return;

After the line:

setTimeout(function(){

Change the 1025 value to 768 to exclude mobile only.

Finally, enjoy your closed by default Elementor Accordion!

I really hope you found this tutorial useful.

Cheers!

WordPress Hosting Review

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2701 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

51 Responses

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

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

        }

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

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

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

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

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

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

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

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

  11. Is it possible to somehow adapt this code to close the accordion, but only if I click on one link/ button when the page is already loaded and the accordion is open?

  12. Doesnt seem to be working for me either. I tried the old, new and combined scripts in various places and my accordions are all still open, even the combined script didnt help on desktop response either

  13. Trying to make it work this new Tab element on mobile AND desktop but when i open my popup it is not closed, is it limited to a regular page and not with new tab in a popup?

    1. Hey Rickard!

      Use this code for that. Be certain that it is in a HTML element that is IN the popup.

      <script>
(function() {
let tester = 0;
let myTimeout = setInterval(function() {
tester++;
if (tester < 30) {
let tabsElems = document.querySelectorAll('.elementor-popup-modal .e-n-tabs')
tabsElems.forEach(e => {
let activeTitles = e.querySelectorAll('.elementor-popup-modal .e-n-tab-title.e-active');
let activeContent = e.querySelector('.elementor-popup-modal .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 })
});
});
clearInterval(myTimeout);
} else {
clearInterval(myTimeout);
}
}, 300);
}());
</script>

      Cheers!

  14. Hi, thank you for this code.

    Can you please provide the code to have tabs closed by default on mobile and desktop for the old tabs?

    1. Hey Wanso!

      I don't understand your request... if you click on them they should close yea?

      If you mean closing automatically by themselves, I would not really recommend this. That will change the height of the page and might cause layout shift and frustration for the users.

      1. Not on my case. I used the code called "Extra: to close the new Tab element on mobile AND desktop, use this code:" for the new tab widget from Elementor, and (I only tested it on desktop) it works perfectly to keep it closed once the page loads, but once I open either of the tabs, then I can't close them, one always has to stay open. I actually came to this post (I've used some of your amazing codes! (thanks!) from this video, which actually says that once they are open, they can't be closed: https://youtu.be/7EdpqoO87xE.

        I had to do a nested tab (tab within a tab) and have two tabs called "Display" and "Hide", where the Hide tab is actually empty, so it's not closing it, but not showing anything. As well, this new tab widget keeps everything open, including all the accordions (I used from Elementor and Element Pack) within it, so I also had to use another trick to have the first tab open, which is actually hidden through CSS.

        I mean, not ideal, but I made it work.

  19. Hey Seto!

    I'm not certain what you mean by "your scripts close tabs and scroll". Please clarify. Also if you have a URL I can check that would help.

    then i wanted to know if it is possible to keep the tabs closed on the desktop and open on the mobile and vice versa.

    Yep I have the code and instructions for this in the tutorial (added some extra instructions just now)

Leave a Reply

Elementor Close Accordion By Default On Page Load (Works)

Resources

Premium

Account

Discounts

Facebook Youtube Envelope

© Copyright 2023 Element How
Privacy Policy | Terms & Conditions