<div class="tab_wrap tab_area">
  <div class="btn_area clearfix">
    <button class="btn btn_tab act" data-depth="0" data-idx="0">First</button>
    <button class="btn btn_tab" data-depth="0" data-idx="1">Second</button>
    <button class="btn btn_tab" data-depth="0" data-idx="2">Third</button>
    <button class="btn btn_tab" data-depth="0" data-idx="3">Fourth</button>
  </div>
  
  <div class="content_area act" data-depth="0" data-idx="0">First tab content</div>
  <div class="content_area" data-depth="0" data-idx="1">
    <p>Second tab content</p>
    <div class="tab_area">
      <div class="btn_area clearfix">
        <button class="btn btn_tab act" data-depth="1" data-idx="0">First</button>
        <button class="btn btn_tab" data-depth="1" data-idx="1">Second</button>
        <button class="btn btn_tab" data-depth="1" data-idx="2">Third</button>
        <button class="btn btn_tab" data-depth="1" data-idx="3">Fourth</button>
      </div>

      <div class="content_area act" data-depth="1" data-idx="0">2Depth First tab content</div>
      <div class="content_area" data-depth="1" data-idx="1">2Depth Second tab content</div>
      <div class="content_area" data-depth="1" data-idx="2">2Depth Third tab content</div>
      <div class="content_area" data-depth="1" data-idx="3">2Depth Fourth tab content</div>
    </div>
  </div>
  <div class="content_area" data-depth="0" data-idx="2">
    <p>Third tab content</p>
    <div class="tab_area">
        <div class="btn_area clearfix">
          <button class="btn btn_tab act" data-depth="1" data-idx="0">First</button>
          <button class="btn btn_tab" data-depth="1" data-idx="1">Second</button>
          <button class="btn btn_tab" data-depth="1" data-idx="2">Third</button>
          <button class="btn btn_tab" data-depth="1" data-idx="3">Fourth</button>
        </div>

        <div class="content_area act" data-depth="1" data-idx="0">2Depth First tab content</div>
        <div class="content_area" data-depth="1" data-idx="1">2Depth Second tab content</div>
        <div class="content_area" data-depth="1" data-idx="2">2Depth Third tab content</div>
        <div class="content_area" data-depth="1" data-idx="3">2Depth Fourth tab content</div>
      </div>
    </div>
  <div class="content_area" data-depth="0" data-idx="3">Fourth tab content</div>
</div>

<div class="tab_wrap tab_area">
  <div class="btn_area clearfix">
    <button class="btn btn_tab act" data-depth="0" data-idx="0">First</button>
    <button class="btn btn_tab" data-depth="0" data-idx="1">Second</button>
    <button class="btn btn_tab" data-depth="0" data-idx="2">Third</button>
    <button class="btn btn_tab" data-depth="0" data-idx="3">Fourth</button>
  </div>
  
  <div class="content_area act" data-depth="0" data-idx="0">First tab content</div>
  <div class="content_area" data-depth="0" data-idx="1">Second tab content</div>
  <div class="content_area" data-depth="0" data-idx="2">Third tab content</div>
  <div class="content_area" data-depth="0" data-idx="3">Fourth tab content</div>
</div>

body{background:#f4f4f4}
.btn{padding:0;background:transparent;border:0;outline:0}
.clearfix::after{display:block;content:'';clear:both}

.tab_wrap{width:800px;margin:50px auto}
.tab_wrap .btn_tab{float:left;width:120px;height:30px;background:#fff;border-radius:10px 10px 0 0;text-align:center;line-height:30px}
.tab_wrap .btn_tab.act{background:#9adce2;font-weight:bold}
.tab_wrap .content_area{display:none;width:100%;min-height:200px;padding:10px;background:#fff;border-radius:0 0 10px 10px;box-sizing:border-box}
.tab_wrap .content_area.act{display:block}
.tab_wrap *[data-depth="1"]{background:#f4f4f4}

function findParent(el, className){
  let check = el.parentNode.classList.contains(className);
  
  if(check === true){
     return el.parentNode;
  }else{
    return findParent(el.parentNode, className);
  }
}

function bindingTabEvent(wrap){
  let wrapEl = document.querySelectorAll(wrap);
  
  wrapEl.forEach(function(tabArea){
    let btn = tabArea.querySelectorAll('.btn_tab');
    
    btn.forEach(function(item){
      item.addEventListener('click', function(){
        let parent = findParent(this, 'tab_area');
        let idx = this.dataset['idx'];
        let depth = this.dataset['depth'];
        let btnArr = parent.querySelectorAll('.btn_tab[data-depth="'+ depth +'"]');
        let contentArr = parent.querySelectorAll('.content_area[data-depth="'+ depth +'"]');
        
        btnArr.forEach(function(btn){ btn.classList.remove('act'); });
        this.classList.add('act');
        contentArr.forEach(function(content){ content.classList.remove('act'); });
        parent.querySelector('.content_area[data-idx="'+ idx +'"][data-depth="'+ depth +'"]').classList.add('act');
      });
    });
  });
}

bindingTabEvent('.tab_wrap');