Simple Vanilla.js tabs implementation

tabs.css

.tabs__header-tab.is-active {
    // Some active styles for header
}

.tabs__content {
    display: none; // Hide tab content
}

.tabs__content.is-active {
    display: block; // And show only active
}

tabs.html

<div
    data-tabs
    class="tabs"
>
    <div class="tabs__header">
        <div
            data-tab="first"
            data-tab-active
            class="tabs__header-tab"
        >
            First
        </div>
        <div
            data-tab="second"
            class="tabs__header-tab"
        >
            Second
        </div>
        <div
            data-tab="third"
            class="tabs__header-tab"
        >
            Third
        </div>
    </div>

    <div
        data-tab-content="first"
        class="tabs__content"
    >
        <h2>First</h2>
        <p>First tab content</p>
    </div>
    <div
        data-tab-content="second"
        class="tabs__content"
    >
        <h2>Second</h2>
        <p>Second tab content</p>
    </div>
    <div
        data-tab-content="third"
        class="tabs__content"
    >
        <h2>Third</h2>
        <p>Third tab content</p>
    </div>
</div>

tabs.js

function initTabs() {
    const tabGroups = document.querySelectorAll('[data-tabs]');
    tabGroups.forEach(tabGroup => {
        const headers = tabGroup.querySelectorAll('[data-tab]');
        const contents = tabGroup.querySelectorAll('[data-tab-content]');

        contents.forEach(content => {
            content.classList.remove('is-active');
        });

        headers.forEach(header => {
            header.classList.remove('is-active');
            header.addEventListener('click', onTabClick.bind(header));
        });

        function onTabClick() {
            setActiveTab(this);
        }

        function setActiveTab(tab) {
            if (!tab) return;

            headers.forEach(header => {
                header.classList.remove('is-active');
            });
            contents.forEach(content => {
                content.classList.remove('is-active');
            });

            const name = tab.dataset.tab;
            const tabContent = tabGroup.querySelector(`[data-tab-content=${name}]`);

            if (!tabContent) return;

            tab.classList.add('is-active');
            tabContent.classList.add('is-active');
        }

        const activeTab = tabGroup.querySelector('[data-tab-active]');
        if (activeTab) {
            setActiveTab(activeTab);
        }
    });
}