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