Creating tabs in pure JS

Introduction

Let’s define first, what are tabs? Tabs are a page element, buttons that switch content on the page (hide or show). With the help of tabs, it is easy to divide the information on the page into any categories. Let’s figure out how to do this

Html

<div class="tabs">
  <ul class="tabs__list">
    <li class="tabs__item"><button class="tabs__btn tabs__btn--active" data-tabs-path="main">Главная</button></li>
    <li class="tabs__item"><button class="tabs__btn" data-tabs-path="archive">Архив</button></li>
    <li class="tabs__item"><button class="tabs__btn" data-tabs-path="settings">Настройки</button></li>
  </ul>
  <div class="tabs__content tabs__content--active" data-tabs-target="main">
    <div class="content">
      <h2 class="content__title">Добро пожаловать!</h2>
      <p class="content__descr">Здесь находятся все ваши активные заказы.</p>
      <ul class="content__list">
        <li class="content__item">
          <a href="#" class="content__link" style="background-image: url('./img/1.png');">
            <span class="content__text">Занятия йогой</span>
          </a>
        </li>
        <li class="content__item">
          <a href="#" class="content__link" style="background-image: url('./img/2.png');">
            <span class="content__text">Кардио</span>
          </a>
        </li>
        <li class="content__item">
          <a href="#" class="content__link" style="background-image: url('./img/3.png');">
            <span class="content__text">Силовые тренировки</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="tabs__content" data-tabs-target="archive">
    <div class="content">
      <h2 class="content__title">Добро пожаловать!2</h2>
      <p class="content__descr">Здесь находятся все ваши активные заказы.</p>
      <ul class="content__list">
        <li class="content__item">
          <a href="#" class="content__link" style="background-image: url('./img/1.png');">
            <span class="content__text">Занятия йогой</span>
          </a>
        </li>
        <li class="content__item">
          <a href="#" class="content__link" style="background-image: url('./img/2.png');">
            <span class="content__text">Кардио</span>
          </a>
        </li>
        <li class="content__item">
          <a href="#" class="content__link" style="background-image: url('./img/3.png');">
            <span class="content__text">Силовые тренировки</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="tabs__content" data-tabs-target="settings">
    <div class="content">
      <h2 class="content__title">Добро пожаловать!3</h2>
      <p class="content__descr">Здесь находятся все ваши активные заказы.</p>
      <ul class="content__list">
        <li class="content__item">
          <a href="#" class="content__link" style="background-image: url('./img/1.png');">
            <span class="content__text">Занятия йогой</span>
          </a>
        </li>
        <li class="content__item">
          <a href="#" class="content__link" style="background-image: url('./img/2.png');">
            <span class="content__text">Кардио</span>
          </a>
        </li>
        <li class="content__item">
          <a href="#" class="content__link" style="background-image: url('./img/3.png');">
            <span class="content__text">Силовые тренировки</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

A lot of code, but here the content itself takes up most of the space. In fact, we are interested in buttons tabs__btn with their date attributes, and tabs__content with their attributes.

CSS

See it in the source

Js

document.addEventListener('DOMContentLoaded', () => {
  const tabs = document.querySelector('.tabs');
  const tabsBtn = document.querySelectorAll('.tabs__btn');
  const tabsContent = document.querySelectorAll('.tabs__content');

  if (tabs) {
    tabs.addEventListener('click', (e) => {
      if (e.target.classList.contains('tabs__btn')) {
        const tabsPath = e.target.dataset.tabsPath;
        tabsBtn.forEach(el => {el.classList.remove('tabs__btn--active')});
        document.querySelector(`[data-tabs-path="${tabsPath}"]`).classList.add('tabs__btn--active');
        tabsHandler(tabsPath);
      }
    });
  }

  const tabsHandler = (path) => {
    tabsContent.forEach(el => {el.classList.remove('tabs__content--active')});
    document.querySelector(`[data-tabs-target="${path}"]`).classList.add('tabs__content--active');
  };
});

What are we doing here?

1. Finding all buttons and all contents into variables tabsBtn and tabsContent…
2. We make a handler for clicking on tabs, and check if we click on the buttons tabsBtn – we perform some actions.
3. The first of them – we take away the attribute data-tabs-path the currently pressed button.
4. Second, we remove the activity class from all buttons
5. Third, we find the current button and give it an activity class.
6. We use the function tabsHandler, in which we remove the class from all contents and through the previously created variable path find the content you want and give it the activity class.

Everything is very simple, and you can see in more detail in the video at the beginning of the article.

Hope it was helpful. Good luck!