<div class="wrapper">
<header>
  <h1>Tab switch</h1>
</header>
<nav>
    <ul>
      <li class="gnav1">Tab1</li>
      <li class="gnav2">Tab2</li>
      <li class="gnav3">Tab3</li>
      <li class="gnav4">Tab4</li>
    </ul>
</nav>
<div class="contents" id="contents">
<div class="container">
<article id="page1" class="show top">
  <section>
    <h1>Tab1 Title</h1>
    <p>This is tab one.</p>
  </section>
</article>
<article id="page2">
  <section>
    <h1>Tab2 Title</h1>
    <p>This is tab two.</p>
  </section>
</article>
<article id="page3">
  <section>
    <h1>Tab3 Title</h1>
    <p>This is tab three.</p>
  </section>
</article>
<article id="page4">
  <section>
    <h1>Tab4 Title</h1>
    <p>This is tab four.</p>
  </section>
</article>
<article id="page5">
  <section>
    <h1>Tab5 Title</h1>
    <p>This is tab five</p>
  </section>
</article>
</div>
</div>
</div>

body,html{
  height:100%;
  //linear-gradient(135deg, #c36fd4 0%,#332bab 100%); 
  padding:1.5rem;
  box-sizing:border-box;
  font-family: 'Cairo', sans-serif;
}
body{
  background: radial-gradient(50% 16%, circle, #c36fd4 32%, #332bab 88%);
}
.wrapper{
  width:100%;
  height:100%;
  margin:auto;
  border-radius:8px;
  background:#f0f0f0;
  position:relative;
  box-shadow:0 10px 20px rgba(0,0,0,0.3);
}
header{

  h1{
    background: #f0f0f0;//linear-gradient(135deg, #0b5386 0%,#09256c 100%); 
    color:#555;
    //text-transform:uppercase;
    padding:1rem;
    border-radius:8px 8px 0 0;
    box-shadow:0 2px 4px -2px rgba(0,0,0,0.3);
    position:relative;
    z-index:8;
  }
  
}
nav{
    width:100%;
    background:linear-gradient(135deg, #fcc274 0%,#eb48a1 100%);
    
    
    @media (min-width:769px){
      float:left;
      width:96px;
      height:calc(100% - 3rem);
      border-radius:0 0 0 8px;
    }
    
    ul{
      display:flex;
      @media (min-width:769px){
        display:block;
      }
    }
  
    li{
      line-height:3;
      padding:0 1rem;
      border-right:1px solid #f0f0f0;
      cursor:pointer;
      color:#fff;
      box-sizing:border-box;
      
      @media (min-width:769px){
        border-bottom:1px solid #f0f0f0;
        border-right:none;
      }
      &.hover{
        background:rgba(255,255,255,0.2);
      }
      &.pressed{
        background:rgba(255,255,255,0.7);
      }
      &.currentPage{
        background:rgba(255,255,255,0.5);
      }
    }
  
}
#contents{
  box-sizing:border-box;
  position:absolute;
  height:calc(100% - 6rem);
  width:100%;
  top:6rem;
  left:0;
  @media (min-width:769px){
  height:calc(100% - 3rem);
  width:calc(100% - 6rem);
  top:3rem;
  left:96px;
  }
  border-radius:0 0 8px 0;
  overflow:hidden;
  background: linear-gradient(135deg, #1c1a30 0%,#38335d 100%);
  
}

article{
  position:absolute;
  height:100%;
  width:100%;
  padding:2rem;
  box-sizing:border-box;
  background: linear-gradient(135deg,#38335d  0%,#1c1a30 100%);
  top:0;
  left:-100%;

  &.hide{
    transition:left 0s 0.5s;
  }
  &:nth-of-type(1){
    z-index:5;
  }
  &:nth-of-type(2){
    z-index:4;
  }
  &:nth-of-type(3){
    z-index:3;
  }
  &:nth-of-type(4){
    z-index:2;
  }
  &:nth-of-type(5){
    z-index:1;
  }
  
  &.show{
    transition:left 0.5s;
    left:0;
    z-index:6;
  }
  
  
  section{
    width:100%;
    color:#fff;
    
    h1{
      font-size:1.5rem;
      margin:0 0 2rem 0;
      
    }
  }
}

$(document).ready(function(){
 var item_num = $('nav li').length + 1;
 var btn_state = true;
 
 $('nav li').hover(function(){
   $(this).addClass('hover');
 },function(){
   $(this).removeClass('hover');
 });
   
 $('nav li').on('click',function(){
   if(btn_state){
     btn_state = !btn_state;
     $('nav li').removeClass('currentPage');
     $(this).addClass('currentPage');

     var i = $('nav li').index(this);
     $('article').removeClass('show');
     $('article').addClass('hide');
     $('article').eq(i).addClass('show');
     
     setTimeout(function(){
       btn_state = !btn_state;
     },500);
   }
 });
  
 
});