remove default active state of elementor tabs

In this guide, we’ll explore how you can remove the active class from your WordPress tabs widget or any other custom tab system using jQuery. We’ll also walk through a real-world example that includes a code snippet and explain how it works.

Understanding Tabs in WordPress

Tab systems generally function by toggling active classes on both the tab headers (or titles) and the corresponding content sections. This is often controlled through JavaScript frameworks like jQuery, as seen in popular page builders like Elementor.
In many cases, tabs have an active state by default, meaning that the first tab and its corresponding content are shown on page load. However, you may want to remove this active state after a certain event occurs (e.g., after a form submission, when a user clicks a button, or on page load after a delay).

Example Code

Here’s a jQuery snippet that will reset the active state for all tabs, both titles and content, by removing the associated active classes and optionally hiding the tab content. This example uses a 100-millisecond delay before resetting the tabs. 
jQuery(document).ready(function($) {
    var delay = 100;
    // Delay the execution to ensure everything is loaded
    setTimeout(function() {
    
        // Remove active classes from tab titles and set aria-selected to false
        $('.e-n-tab-title').removeClass('elementor-active').attr('aria-selected', 'false');
        
        // Remove active class from the tab content
        $('.e-n-tabs-content > div').removeClass('e-active');
        
        // Optionally hide the tab content (if necessary)
        $('.elementor-tab-content').css('display', 'none');
    
    }, delay);
});

Explanation of the Code

  • jQuery(document).ready(function($) {…}: This ensures that the script runs only after the DOM is fully loaded. This is crucial when working with dynamic content like WordPress widgets.
  • var delay = 100;: We set a small delay (100 milliseconds) before resetting the tabs. This delay allows all elements to be fully rendered before the jQuery functions are executed, preventing issues where elements are not yet available for manipulation.
  • setTimeout(function() {…}, delay);: The setTimeout() function is used to delay the execution of the tab-resetting logic.

Removing Active Classes:

  • $(‘.e-n-tab-title’).removeClass(‘elementor-active’).attr(‘aria-selected’, ‘false’);: This line removes the elementor-active class from all tab titles (or headers), indicating that none of the tabs are currently active. It also sets the aria-selected attribute to false to ensure proper accessibility.
  • $(‘.e-n-tabs-content > div’).removeClass(‘e-active’);: This line removes the e-active class from the tab content containers. In many tab systems, this class is what shows or hides the content associated with each tab.

Hiding Tab Content:

  • $(‘.elementor-tab-content’).css(‘display’, ‘none’);: In addition to removing the active class, this line ensures that all tab content is hidden by setting the display CSS property to none. This is an optional step, but it’s useful if the tabs rely on CSS to toggle visibility.

Customizing the Code for Your Needs

You can modify this code to suit your specific use case. For example, if you have a different class structure in your custom tabs, simply replace the class names (.e-n-tab-title, .e-n-tabs-content, .elementor-tab-content) with those that match your system.

For Custom Tabs

If you are not using Elementor or WordPress widgets, and have a custom tab system, you can still use this script by adjusting the selectors. For instance: 
// Custom tab example
$('.custom-tab-title').removeClass('active').attr('aria-selected', 'false');
$('.custom-tab-content').removeClass('active').css('display', 'none');

Conclusion

By using this jQuery snippet, you can easily reset the active state of your WordPress tabs widget or custom tabs. Whether you need this functionality on page load, after a user action, or dynamically with AJAX, this simple approach gives you full control over how your tabs behave.
Tabs are a fantastic way to organize content, but they require careful management of their active states. With a bit of jQuery, you can ensure that your tabs remain functional and user-friendly under all circumstances.