Stylish Sliding Tabs With jQuery And CSS3 - Toggle Tabs

The Toggle Tabs script allows the users to switch between tabbed content with sliding, toggle button-style navigation tabs. Powered by CSS/CSS3 and a little bit of jQuery.

How to use it:

1. Create the tabbed content and their corresponding navigation tabs as these:

<div class="tab-slider--nav">
  <ul class="tab-slider--tabs">
    <li class="tab-slider--trigger active" rel="tab1">Tab 1</li>
    <li class="tab-slider--trigger" rel="tab2">Tab 2</li>
  </ul>
</div>
<div class="tab-slider--container">
  <div id="tab1" class="tab-slider--body">
    <h2>Tab 1</h2>
    <p>Tab 1 content</p>
  </div>
  <div id="tab2" class="tab-slider--body">
    <h2>Tab 2</h2>
    <p>Tab 2 content</p>
  </div>
</div>

2. Style the tabbed content & tab navigation in the CSS.

.tab-slider--nav {
  width: 100%;
  float: left;
  margin-bottom: 20px;
}

.tab-slider--tabs {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  border-radius: 35px;
  overflow: hidden;
  background: #fff;
  height: 35px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tab-slider--tabs:after {
  content: "";
  width: 50%;
  background: #345F90;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  border-radius: 35px;
}

.tab-slider--tabs.slide:after { left: 50%; }

.tab-slider--trigger {
  font-size: 12px;
  line-height: 1;
  font-weight: bold;
  color: #345F90;
  text-transform: uppercase;
  text-align: center;
  padding: 11px 20px;
  position: relative;
  z-index: 2;
  cursor: pointer;
  display: inline-block;
  -webkit-transition: color 250ms ease-in-out;
  transition: color 250ms ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tab-slider--trigger.active { color: #fff; }

.tab-slider--body { margin-bottom: 20px; }

3. Include the latest version of the jQuery JavaScript library at the bottom of the page.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 

4. The jQuery script to active the sliding tabs.

$("document").ready(function(){
  $(".tab-slider--body").hide();
  $(".tab-slider--body:first").show();
});

$(".tab-slider--nav li").click(function() {
  $(".tab-slider--body").hide();
  var activeTab = $(this).attr("rel");
  $("#"+activeTab).fadeIn();
  if($(this).attr("rel") == "tab2"){
    $('.tab-slider--tabs').addClass('slide');
  }else{
    $('.tab-slider--tabs').removeClass('slide');
  }
  $(".tab-slider--nav li").removeClass("active");
  $(this).addClass("active");
});

---

This awesome jQuery plugin is developed by derekjp. For more Advanced Usages, please check the demo page or visit the official website.