SCSS

by Alexandru Gatea

HTML

<div class="hero">

  <div class="tab-list">
    <div class="tab-triggers">
      <div class="tab-el active">
        <div class="tab-el-trigger" data-trigger="comp">Competences</div>
      </div>
      <div class="tab-el">
        <div class="tab-el-trigger" data-trigger="dom">Domains</div>
      </div>
      <div class="mobile-trigger"></div>
    </div>

    <div class="tab-contents">
      <div id="comp" class="tab active">
        aici pui ce vrea pula ta boss
      </div>
      <div id="dom" class="tab">
        si aici pui la fel
      </div>
    </div>

  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}

body {
  background: #fefefe;
}

.hero {
  width: 100%;
  height: 100vh;
  margin-bottom: 100vh;
  background: #212121;
  padding-top: 2rem;
}

.mobile-trig {
  display: none;
}


.tab-list {
  position: relative;
  display: flex;
  
  .tab-el {
    display: flex;
    margin-bottom: 1px;
    align-items: flex-start;
    
    .tab-el-trigger {
      width: 200px;
      background: #cccccc;
      padding: 1rem;
    }
    
  }
  
  .tab-el.active {
   .tab-el-trigger {
      background: #fefefe;
    }
  }
}

.tab-contents {
  top: 0;
  position: relative;
  width: 400px;
  
  .tab {
      height: 300px;
      padding: 1rem;
      background: #fefefe;
      display: none;
      
      &.active {
        display: block;
      }
    }
}



@media (max-width: 767px) {
  
  .tab-list {
      padding: 0 1rem;
      display: block;
          
      .tab-triggers {
        height: 50px;
        overflow: hidden;
        margin-bottom: 50px;
        width: 100%;
        
       .tab-el {
          display: none;

          .tab-el-trigger {
            width: 100%;
          }
        }
        
        .tab-el.active {
          display: block;
        }

      }

      .mobile-trigger {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

  }
  
  .tab-list.open {
    
    .tab-triggers {
      height: 100px;
    }
    
    .tab-el {
      display: block;

    }
   .mobile-trigger {
     display: none;
   }
  }
  
  .tab-contents {
    width: 100%;
  }
  
  
}

JavaScript

jQuery(document).ready(function($){

	var trigger = $('.tab-el-trigger');
  
  
  trigger.on('click', function() {
  
  var activeEl = $(this).attr('data-trigger');
  	$('.tab-el').removeClass('active');
    $('.tab').removeClass('active');
    $(this).parent().addClass('active');
    $('#' + activeEl).addClass('active');
    $('.tab-list').removeClass('open');
  });
  
  $('.mobile-trigger').on('click', function(){
  	$('.tab-list').toggleClass('open');
  });

});