toggle

by John Doe

HTML

<div class="toggle">
  <div class="toggle-btns">
    <a href="javascript:void(0)" data-toggle="first" class="active">first</a>
    <a href="javascript:void(0)" data-toggle="second">second</a>
  </div>
  <div id="first_div" class="toggle-div active">
   First
  </div>
  <div id="second_div" class="toggle-div">
   Second
  </div>
</div>

<div class="toggle">
  <div class="toggle-btns">
    <a href="javascript:void(0)" data-toggle="third" class="active">third</a>
    <a href="javascript:void(0)" data-toggle="fourth">fourth</a>
    <a href="javascript:void(0)" data-toggle="fifth">fifth</a>
  </div>
  <div id="third_div" class="toggle-div active">
   third
  </div>
  <div id="fourth_div" class="toggle-div">
   fourth
  </div>
  <div id="fifth_div" class="toggle-div">
   fifth
  </div>
</div>

CSS

*{
  box-sizing: border-box;
}
body{
  background-color: #fff;
  padding: 15px;
  font-size: 12px;
  font-family: arial;
}
a {
    display: inline-block;
    padding: 15px 30px;
    background-color: #fbfbfb;
    text-transform: uppercase;
    font-size: 12px;
    font-family: arial;
    color: #252525;
    text-decoration: none;
    float: left;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.08);
}
a:first-of-type{
  border-top-left-radius: 5px; 
}
a:last-of-type{
  border-top-right-radius: 5px; 
}
a.active {
    font-weight: bold;
    /* box-shadow: 1px 1px 5px rgba(0,0,0,0.2); */
    background-color: #edf3fd;
    box-shadow: none;
}
.toggle{
  margin-bottom: 30px;
}
.toggle-div{
  clear: both;
  width: 100%;
  background-color: rgba(3, 169, 244, 0.61);
  background-color: #edf3fd;
  color: #252552;
  padding: 15px;
  margin-top: 15px;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
  font-size: 14px;
  display: none;
}
.toggle-div.active{
  display: block;
}

JavaScript

$('.toggle-btns a').click(function(){
  if(!$(this).hasClass('active')){
  	var currentToggle = '#' + $(this).data('toggle') + '_div';
    $(this).siblings('a').removeClass('active');
    $(this).addClass('active');
    $(this).closest('.toggle').children('.toggle-div').hide();
    $(this).closest('.toggle').children('.toggle-div'+currentToggle).show();
  }
});