gutenberg tab script

tab-backend.js

const { innerBlocks } = useSelect(select => select('core/block-editor').getBlocksByClientId(clientId)[0]);
    useEffect(() => {
        const { updateBlockAttributes } = dispatch('core/block-editor');
        times(innerBlocks.length, n => {
            updateBlockAttributes(innerBlocks[n].clientId, {
                tabParentId: `${uniqueId}`
            });
        });
    }, [uniqueId, innerBlocks]);

    // Handle Tab Click
    const handleTabClick = id => {
        // setIsClickTab(true);
        const tabsParentEl = (tabWrapRef || { current: false }).current;
        if (!tabsParentEl) return false;
        const allTabChildWraps = tabsParentEl.querySelectorAll(`.single-tab`);
        if (allTabChildWraps.length === 0) return false;
        for (const tabWrapDiv of allTabChildWraps) {
            const tabId = tabWrapDiv.dataset.tabId;
            if (tabId === id) {
                tabWrapDiv.style.display = 'block';
                tabWrapDiv.style.animation = 'fadeIn 0.3s';
            } else {
                tabWrapDiv.style.display = 'none';
            }
        }
        setActiveTabId(`${id}`);
    };

tab-frontend.js

window.addEventListener('DOMContentLoaded', () => {
    const allTabTitlteWrappers = document.querySelectorAll('.wp-block-atbs-tabs > .tabs-container > .tabs-nav > .tabs-titles');

    if (allTabTitlteWrappers.length === 0) return false;

    for (const tabTitle of allTabTitlteWrappers) {
        const tabTitlteList = tabTitle.children;

        for (const tabTitleItem of tabTitlteList) {
            tabTitleItem.addEventListener('click', e => {
                e.preventDefault();

                // remove active class from all tab titles
                const tabTitleParentEl = tabTitleItem.closest('.tabs-titles');
                const allTabTitleItems = tabTitleParentEl.querySelectorAll('.tab-title');
                for (const tabItem of allTabTitleItems) {
                    tabItem.classList.remove('active');
                }

                // add active class to the clicked tab title
                tabTitleItem.classList.add('active');

                const tabTitleId = tabTitleItem.dataset.titleTabId;
                const tabParentEl = tabTitleItem.closest('.wp-block-atbs-tabs');

                const allTabChildWraps = tabParentEl.querySelectorAll(`.single-tab`);

                if (allTabChildWraps.length === 0) return false;

                for (const tabWrapDiv of allTabChildWraps) {
                    const tabId = tabWrapDiv.dataset.tabId;
                    // remove active class from all tab content
                    tabWrapDiv.classList.remove('active');
                    if (tabId === tabTitleId) {
                        // add active class to the clicked tab content
                        tabWrapDiv.classList.add('active');
                        tabWrapDiv.style.display = 'block';
                        tabWrapDiv.style.animation = 'fadeIn 0.3s';
                    } else {
                        // remove active class from all tab content
                        tabWrapDiv.classList.remove('active');
                        tabWrapDiv.style.display = 'none';
                    }
                }
            });

            // keep the first tab open by default
            if (tabTitleItem.dataset.titleTabId === '1') {
                tabTitleItem.click();

                // add active class to the first tab
                tabTitleItem.classList.add('active');

                // add active class to the first tab content
                const tabParentEl = tabTitleItem.closest('.wp-block-atbs-tabs');
                const allTabChildWraps = tabParentEl.querySelectorAll(`.single-tab`);
                if (allTabChildWraps.length === 0) return false;
                for (const tabWrapDiv of allTabChildWraps) {
                    const tabId = tabWrapDiv.dataset.tabId;
                    if (tabId === '1') {
                        tabWrapDiv.classList.add('active');
                    }
                }
            }
        }
    }
});