Tabs

gistfile1.txt

<div class="tab-wrapper">
    <div class="tabs-header">
      <div class="tab-header tab-header_show">Header 1</div>
      <!-- /.tab-header -->
      <div class="tab-header">Header 2</div>
      <!-- /.tab-header -->
      <div class="tab-header">Header 3</div>
      <!-- /.tab-header -->
    </div>
    <!-- /.tabs-header -->
    <div class="tabs-content">
      <div class="tab-content fade tab-content_show">Header 1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam numquam sapiente nobis ipsum soluta. Natus exercitationem tenetur modi ea libero perspiciatis rerum nulla laborum, ad nemo numquam? Aliquam, commodi minima.</div>
      <!-- /.tab-content -->
      <div class="tab-content fade">Header 2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam numquam sapiente nobis ipsum soluta. Natus exercitationem tenetur modi ea libero perspiciatis rerum nulla laborum, ad nemo numquam? Aliquam, commodi minima.</div>
      <!-- /.tab-content -->
      <div class="tab-content fade">Header 3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam numquam sapiente nobis ipsum soluta. Natus exercitationem tenetur modi ea libero perspiciatis rerum nulla laborum, ad nemo numquam? Aliquam, commodi minima.</div>
      <!-- /.tab-content -->
    </div>
    <!-- /.tabs-content -->
  </div>
  <!-- /.tab-wrapper -->
  
  .tab-wrapper
  width: 600px
  margin: auto
  padding-top: 30px
  .tabs-header
    display: flex
    transform: translateY(1px)
    position: relative
    z-index: 1
    .tab-header
      border: 1px solid black
      border-top-left-radius: 2px
      border-top-right-radius: 2px
      padding: 15px
      background-color: #121212
      color: #fff
      transition: .5s
      &:hover
        cursor: pointer
        color: #000
        background-color: #fff
      &_show
        color: #000
        background-color: #fff
        border-bottom: none
  .tabs-content
    display: flex
    position: relative
    .tab-content
      display: none
      padding: 15px
      background-color: #fff
      color: #000
      border: 1px solid black
      box-sizing: border-box
      border-bottom-left-radius: 2px
      border-bottom-right-radius: 2px
      border-top-right-radius: 2px
      position: absolute
      top: 0
      left: 0
      &_show
        display: block
.fade
  animation: tabContent .5s cubic-bezier(0.6, 0, 0.18, 0.99)

@keyframes tabContent
  0%
    opacity: 0
    transform: scale(0.98)
  100%
    opacity: 1
    transform: scale(1)
    
   
 let tab = document.querySelectorAll('.tab-header'),
      tabContent = document.querySelectorAll('.tab-content');

  tab.forEach(function(tab, i) {
    tab.addEventListener('click', function() {
      hideTab();
      this.classList.add('tab-header_show');
      tabContent[i].classList.add('tab-content_show');
    });
  });

  function hideTab() {
    tab.forEach((item) => {
      item.classList.remove('tab-header_show');
    });
    tabContent.forEach((item) => {
      item.classList.remove('tab-content_show');
    });
  }