design/public/assets/js/tabs.js

document.querySelectorAll('.tabsMain').forEach(tabsMain => {
    const tabsTopElements = tabsMain.querySelectorAll('.tabsMainTopElement, .tabsMainTopElementAlt');
    const tabsMidElements = tabsMain.querySelectorAll('.tabsMainMidElement');

    tabsTopElements.forEach((tab, index) => {
        tab.addEventListener('click', () => {
            // Remove active class from all tabs and content
            tabsTopElements.forEach(t => {
                t.classList.remove('tabsMainTopElementActive');
                t.classList.remove('tabsMainTopElementActiveAlt');
            });
            tabsMidElements.forEach(m => m.classList.remove('tabsMainMidElementActive'));

            // Add active class to the clicked tab and corresponding content
            tab.classList.add('tabsMainTopElementActive');
            if (tab.classList.contains('tabsMainTopElementAlt')) {
                tab.classList.add('tabsMainTopElementActiveAlt');
            }
            tabsMidElements[index].classList.add('tabsMainMidElementActive');

            // Set active class on the parent tabsMain
            tabsMain.classList.add('tabsMainActive');
            // Remove active class from all other tabsMain
            document.querySelectorAll('.tabsMain').forEach(otherTabsMain => {
                if (otherTabsMain !== tabsMain) {
                    otherTabsMain.classList.remove('tabsMainActive');
                }
            });
        });
    });
});