Elementor Tabs Closed By Default and Make Closable (2024)
Get Premium

Elementor Tabs Closed By Default and Make Closable (2024)

Element.How also offers premium tutorials! Check them here:

Elementor Tabs Closed By Default and Make Closable (2024)

Table of Contents

In this tutorial, you will learn how to close the Elementor tabs by default, on mobile and desktop, on page load.

You will also learn how to make it so that clicking the active tab title closes the tab content. So the tab titles become more of a toggle, like the accordion element behaves. They open / close the tab content, instead of just opening it.

My code here also takes care of updating the aria attributes to their proper values, to respect accessibility standards.

The code you will find here is tested working and will successfully close your Elementor tabs by default, on page load.

This tutorial is exclusively for the new Elementor tabs element. (The one where the content is a container).

Here is a live example of what we will create:

Elementor Tabs Closed By Default Code

Copy paste the code below in an HTML element, on the same page, to close all the Elementor tabs on your page by default, on page load.

Elementor Tabs Closed By Default and Make Closable (2024) 1

Use this code to close the Elementor tabs element on mobile only.

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Tabs Closed By Default and Make Closable (2024) tutorial 
 * Found at this URL https://element.how/elementor-tabs-closed-by-default/ 
 */ 
</script>

Use this code to close all tabs on page load, on all viewports.

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Tabs Closed By Default and Make Closable (2024) tutorial 
 * Found at this URL https://element.how/elementor-tabs-closed-by-default/ 
 */ 
</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 have it work for desktop and tablet only.

Making the Elementor Tabs Titles a toggle

To change the behaviour of the Elementor Tabs Titles from Opening only the related tab, to toggling it open / close, add this code to your page.

This one's position is important: it needs to be added in an HTML element that's at the end of your page, or at least after all the tabs elements on your page.

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Tabs Closed By Default and Make Closable (2024) tutorial 
 * Found at this URL https://element.how/elementor-tabs-closed-by-default/ 
 */ 
</script>

Finally, enjoy your closed by default Elementor Tabs!

I really hope you found this tutorial useful.

Cheers!

Elementor Tabs Closed By Default and Make Closable (2024)

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

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

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

15 Responses

  5. This isn't working for me on mobile. I have the tabs widget configured in as a template and inserted into the menu and into a popup using the template widget. I placed the code </body> end in the Elementor custom code feature and made it appear on the entire site. It works in the menu widget on desktop, but not in the popup on tablet/mobile (the items still appear).

    1. Greetings Emily!

      Try this, IN the popup template, in a HTML element:

      <script>
/* Code from https://element.how/elementor-tabs-closed-by-default/
* Copyright 2024 Element.How
* Automatically close the tabs in a popup
*/
document.addEventListener('DOMContentLoaded', function () {
    jQuery(document).on('elementor/popup/show', (event, id, instance) => {
        setTimeout(function () {
            let tabsElems = document.querySelectorAll('.e-n-tabs')
            tabsElems.forEach(e => {
                let activeTitles = e.querySelectorAll('.e-n-tab-title[aria-selected="true"]');
                let activeContent = e.querySelector('.e-con.e-active')
                activeContent.style.display = 'none';
                activeContent.classList.remove('e-active');
                activeTitles.forEach(activeTitle => activeTitle.setAttribute('aria-selected', false));
            });
        }, 30);
    });
});
</script>

      Cheers!

      2. Ok one more issue... it works on mobile, but now doesn't work on desktop. If I place the original code after the desktop version, then mobile stops working. If I place the code on the popup, mobile works (since the popup is my mobile menu), but desktop doesn't since the code doesn't load until the popup opens. Is there a way to have the code work independently for the desktop and mobile versions? Or to add the Menu widget loading/opening a dropdown be a trigger for the code loading?

    2. Greetings Emily,

      Try the following.

      In both codes, you will see this line:

      let tabsElems = document.querySelectorAll('.e-n-tabs')

      In the desktop code, change it to this:

      let tabsElems = document.querySelectorAll('.desktopTabs .e-n-tabs')

      and then give the class name desktopTabs to your destop tabs element

      In the mobile code, change it to this:

      let tabsElems = document.querySelectorAll('.mobileTabs .e-n-tabs')

      and then give the class name mobileTabs to your mobile tabs element

      Let me know if that works.

      Cheers!

      1. That works! And as a note to anyone else, I have the tabs setup as a template, and they are inserted on both areas of the website using the template widget. I added the classes above (.mobileTabs, .desktopTabs) to the template widget, not the tabs the template widget was pulling in. So the tabs themselves have no class on them, the template placed in the popup has .mobileTabs and the template placed in the mega menu widget has .desktopTabs. HTML for the mobile version is placed at the bottom of the popup. HTML for the desktop is placed after the menu somewhere. Both are now working correctly and independently from one another. THANK YOU!!

Leave a Reply