How to Set Elementor Tabs Closed by Default

Elementor Tabs Closed by Default might be a setting you are currently missing in Elementor. Look no further, with a simple code snippet you can automatically close the tabs on the first visit of the page. Whether you’re using the old tabs or the new nested tabs from Elementor, this solution by Web Squadron and ElementHOW might help you out.

Set Elementor Tabs Closed by Default

1. Code Credit
   You can find the original code over at ElementHOW. They have a great selection of free & premium Elementor content. Go check it out.
2. Copy the Code
   Copy the code below which best fits your situation:
   New Elementor Tabs Closed on Desktop and Mobile

   <script>
   /* Automatically close the mobile accordion from the tabs element on mobile */
   /* Credit ElementHOW */
   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>
   

   New Elementor Tabs Closed on Mobile
   

   <script>
   /* Automatically close the mobile accordion from the tabs element on mobile */
   /* Credit ElementHOW */
   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>

   Old Elementor Tabs Widget

   <script>
   /* Automatically close the mobile accordion from the tabs element on mobile */
   /* Credit ElementHOW */
   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>

3. Add an HTML Widget
   Return to your WordPress page and add an HTML widget. This widget can be placed anywhere on the page.
   
4. Paste the Code
   Inside the HTML widget, paste the copied code. This action will set all tabs to be closed by default.
   
5. Check the Result
   Refresh your page. You’ll notice that all tabs are now closed by default and will only open when clicked.
   
6. Remember
   The tab is just closed on the first visit to the page. As soon as you click on a tab it will remain open.

Understanding Elementor Tabs

Elementor tabs are a powerful tool that can significantly enhance the organization and presentation of your content. They allow you to group and display information in a compact, user-friendly format. By understanding how to manipulate these tabs, you can create a more engaging and interactive experience for your website visitors.

When to Use Tabs

Tabs are particularly useful when you have a lot of information to present but don’t want to overwhelm your audience. They allow you to categorize your content and present it in a digestible format. For instance, you might use tabs to separate different services you offer, display product specifications, or organize frequently asked questions.

Common Issues

1. Tabs Remain Open After Clicking
   Once a tab has been opened, it will remain open. This is a default setting and cannot be changed with the current code.
2. Code Doesn’t Work
   Ensure that you’ve copied the correct code. There are multiple codes available, so it’s crucial to select the one fitting to your use case.