tabs OOP

tabs_OOP.css

.tabs {
  position: relative;
  text-align: center;
}

.tabs__list {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  list-style-type: none;
  font-weight: 700;
  @include adaptiv-value('font-size', 36, 22, 1);
  @include adaptiv-value('margin-bottom', 40, 30, 1);
  @include adaptiv-value('padding-bottom', 25, 10, 1);

  &:after,
  &:before {
    content: "";
    position: absolute;
    display: block;
    bottom: 0;
  }

  &:after {
    width: 80%;
    height: 2px;
    background-color: $grey;
  }

}

.tabs__item:not(:last-child) {
  margin-right: 10px;
}

.tabs__item {}

.tabs__btn {
  border: none;
  cursor: pointer;
  text-align: center;
  color: $grey;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;


}

.tabs__btn_active {
  color: $gold;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  pointer-events: none;
}

.tabs__content {
  display: none;
}

.tabs__content_active {
  display: block;
}

tabs_OOP.js

function Tab(tabSelector) {
  const tabContainer = document.querySelector(tabSelector);
  const tabsBtn = tabContainer.querySelectorAll('.tabs__btn');
  const tabsContent = tabContainer.querySelectorAll('.tabs__content');

  tabContainer.addEventListener('click', function (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);
    }

    function tabsHandler(path) {
      tabsContent.forEach(el => {
        el.classList.remove('tabs__content_active')
      });
      tabContainer.querySelector(`[data-tabs-target="${path}"]`).classList.add('tabs__content_active');
    }
  });
}

// new Tab('.howtoget__tabs');

tabsOOP.html

<div class="tabs howtoget__tabs">
  <ul class="tabs__list">
    <li class="tabs__item"><button class="tabs__btn tabs__btn_active" data-tabs-path="1">1</button></li>
    <li class="tabs__item"><button class="tabs__btn" data-tabs-path="2">2</button></li>
  </ul>
  <div class="tabs__content tabs__content_active" data-tabs-target="1">
    <div class="content">
      1
    </div>
  </div>
  <div class="tabs__content" data-tabs-target="2">
    <div class="content">
      2
    </div>
  </div>
</div>