nested tabs

by DelphinPRO

HTML

<div class="tabs" id="uniqid1">
  <div class="tabs__nav tabs-nav segment-controls">
    <div class="tabs-nav__item  btn-segment active" data-tab-name="tab-1">ТАБ 1</div>
    <div class="tabs-nav__item btn-segment" data-tab-name="tab-2">ТАБ 2</div>
    <div class="tabs-nav__item btn-segment" data-tab-name="tab-3">ТАБ 3</div>
  </div>
  <div class="tabs__content">
    <div class="tab active tab-1">КОНТЕНТ 1111</div>
    <div class="tab tab-2">КОНТЕНТ 2222</div>
    <div class="tab tab-3">


      <div class="tabs" id="uniqid2">
        <div class="tabs__nav tabs-nav segment-controls">
          <div class="tabs-nav__item  btn-segment active" data-tab-name="tab-1">ТАБ 1</div>
          <div class="tabs-nav__item btn-segment" data-tab-name="tab-2">ТАБ 2</div>
          <div class="tabs-nav__item btn-segment" data-tab-name="tab-3">ТАБ 3</div>
        </div>
        <div class="tabs__content">
          <div class="tab active tab-1">КОНТЕНТ 333 1111</div>
          <div class="tab tab-2">КОНТЕНТ 333 2222</div>
          <div class="tab tab-3">КОНТЕНТ 333 3333</div>
        </div>
      </div>

    </div>
  </div>
</div>

CSS

.tabs__nav {
  display: flex;
}

.tabs-nav__item {
  padding: 1rem;
  border: 1px solid;
  cursor: pointer;
}

.tabs-nav__item.active {
  background: yellow;
}

.tab {
	display: none;
}
.tab.active {
	display: block;
}

JavaScript

let tab = function() {
  let tabName;
  let tabs = document.querySelectorAll('.tabs');

  tabs.forEach(item => {
    const id = item.getAttribute('id');
    let tabNav = item.querySelectorAll('#' + id + ' > .tabs__nav > .tabs-nav__item');
    let tabContent = item.querySelectorAll('#' + id + ' > .tabs__content > .tab');
    tabNav.forEach(item => {
      item.addEventListener('click', selectTabNav)
    })

    function selectTabNav() {
      tabNav.forEach(item => {
        item.classList.remove('active')
      });
      this.classList.add('active');
      tabName = this.getAttribute('data-tab-name');
      selectTabContent(tabName);
    }

    function selectTabContent(tabName) {
      tabContent.forEach(item => {
        item.classList.contains(tabName) ?
          item.classList.add('active') :
          item.classList.remove('active')
      })
    }
  })

};
tab();