Stylish Sliding Tabs With jQuery And CSS3 - Toggle Tabs

File Size: 2.7 KB
Views Total: 9520
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>
<div class="tab-slider--container">
  <div id="tab1" class="tab-slider--body">
    <h2>Tab 1</h2>
    <p>Tab 1 content</p>
  <div id="tab2" class="tab-slider--body">
    <h2>Tab 2</h2>
    <p>Tab 2 content</p>

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;
} { 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=""></script> 

4. The jQuery script to active the sliding tabs.


$(".tab-slider--nav li").click(function() {
  var activeTab = $(this).attr("rel");
  if($(this).attr("rel") == "tab2"){
  $(".tab-slider--nav li").removeClass("active");

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