Super small tab system for the web

gistfile1.txt

// HTML

<div class="tabContainer">
  <div class="tabs">
    <div class="tab">Tab Selector 1</div>
    <div class="tab">Tab Selector 2</div>
    <div class="tab">Tab Selector 3</div>
  </div>
  <div class="contents">
    <div class="content">
      // Content for Tab Selector 1
    </div>
    <div class="content">
      // Content for Tab Selector 2
    </div>
    <div class="content">
      // Content for Tab Selector 3
    </div>
  </div>
</div>


// JS

const tabContainer = document.querySelector('.tabContainer');
const tabs = tabContainer.querySelectorAll('.tabs .tab');
const contents = tabContainer.querySelectorAll('.contents .content');

let tabCount = 0;
let contentCount = 0;

tabs.forEach((item) => {
    item.dataset.id = 'tab_' + tabCount;
    item.addEventListener('click', function(e) {
        const target = tabContainer.querySelector('[data-id="tabContent_' + this.dataset.id.substring(4) + '"]');

        if (!target) {
            return;
        }

        contents.forEach((item) => {
            item.classList.add('hidden');
        });

        target.classList.remove('hidden');
        tabs.forEach((item) => {
            item.classList.remove('active');
        })
        this.classList.add('active');
    });
    tabCount++;
});

contents.forEach((item) => {
    item.dataset.id = 'tabContent_' + contentCount;
    item.classList.add('hidden');
    if (contentCount === 0) {
        item.classList.remove('hidden');
        tabs[0].classList.add('active');
    }
    contentCount++;
});