WooCommerce: Add Active Class to Product Tab Content When Active.js

// Get Active Tabs Object
const getActiveTabs = () => {
    const tabObject = {}; // Initialize an empty object

    const wooTabsContainer = document.querySelector('.wc-tabs-wrapper');

    // Check if the container exists
    if (!wooTabsContainer) {
        console.error('Tabs container not found.');
        return tabObject; // Return an empty object if not found
    }

    const wooTabs = wooTabsContainer.querySelectorAll('li');

    wooTabs.forEach(tab => {
        const tabId = tab.id.replace('title-', ''); // Extract the tab ID

        // Add the tab information to the object
        tabObject[tabId] = {
            tabId: tab.id,      // Store the full tab ID
            contentId: tabId    // Store the extracted content ID
        };
    });

    return tabObject; // Return the object containing all tabs
}

// Add active to first tab
const firstTab = document.querySelector('.woocommerce-tabs .woocommerce-Tabs-panel');
firstTab.classList.add('active');

// Initialize active tabs
const activeTabs = getActiveTabs();

// Set up event listeners for each tab
Object.keys(activeTabs).forEach(tabKey => {
    const tabLi = document.getElementById(activeTabs[tabKey].tabId);
    const tabBox = document.getElementById(activeTabs[tabKey].contentId);

    // Add click event listener to each tab
    tabLi.addEventListener('click', () => {
        // Activate the clicked tab's content
        tabBox.classList.add('active');

        // Deactivate all other tabs
        const allTabs = document.querySelectorAll('.woocommerce-Tabs-panel');
        allTabs.forEach(otherTab => {
            if (otherTab.id !== tabBox.id) {
                otherTab.classList.remove('active');
            }
        });
    });
});