Animated Semantic Tab Control with jQuery and CSS3

A little jQuery script to create vertical or horizontal tabbed panels with fancy CSS3 animations and semantic markup.

How to use it:

1. Create tabbed panels from any sensible markup you like.

<dl class="tabs">
  <dt class="tabs__item tabs__item--active">Tab 1</dt>
  <dd class="tabs__body">
    <div class="tabs__content">Content 1</div>
  </dd>
  <dt class="tabs__item">Tab 2</dt>
  <dd class="tabs__body">
    <div class="tabs__content">Content 2</div>
  </dd>
  <dt class="tabs__item">Tab 3</dt>
  <dd class="tabs__body">
    <div class="tabs__content">Content 3</div>
  </dd>
</dl>

2. The required CSS to style the tabbed panels.

.tabs {
  position: relative;
  margin-bottom: 24px;
  height: 300px;
}

.tabs__item {
  position: relative;
  display: inline-block;
  z-index: 20;
  line-height: 2.5;
  margin-right: -0.28em;
  padding-left: 12px;
  padding-right: 12px;
  color: white;
  box-shadow: inset 0 50px #9b59b6;
  background-color: #ecf0f1;
  transition: box-shadow 0.35s ease-out, color 0.4s ease-out;
  cursor: pointer;
}

.tabs__item:hover { box-shadow: inset 0 50px #ac75c2; }

.tabs__item:first-child { margin-left: 12px; }

.tabs__item--active {
  color: #9b59b6;
  box-shadow: inset 0 0 #9b59b6 !important;
}

.tabs__item--active + .tabs__body { z-index: 10; }

.tabs__body {
  position: absolute;
  overflow: hidden;
  left: 0;
  right: 0;
  height: 200px;
  margin-left: 0;
  padding: 24px;
  border-radius: 4px;
  border-bottom: 2px solid #cfd9db;
  background-color: #ecf0f1;
  transition: all 0.25s;
}

.tabs__content {
  opacity: 1;
  transition: all 0.15s ease-out;
}

.tabs__content--hidden {
  opacity: 0;
  transform: translate(0, 8px);
}

3. Include the latest version of jQuery library at the bottom of your document body.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

4. The Javascript to active the tab control.

$(".tabs").each(function() {
  var $tabs =     $(this),
    $tabItem =    $tabs.children(".tabs__item"),
    $tabBody =    $tabs.children(".tabs__body"),
    $tabContent = $tabBody.children(".tabs__content");
  
  $tabItem.click(function() {
    var $currentTab = $(this);
    
    $tabContent.addClass("tabs__content--hidden");
    $tabItem.removeClass("tabs__item--active");

    setTimeout(function() {
    $currentTab.addClass("tabs__item--active");
     
    }, 200);
    
    setTimeout(function() {   
     $tabContent.removeClass("tabs__content--hidden");
    }, 500); 
  });
});

---

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