Accessible High Performance Tabs Plugin with jQuery and Velocity.js

tabtab.js is a lightweight jQuery plugin for creating accessible, high performance tabbed content panels with some cool transition effects powered by Velocity.js.

Key Features:

• Lightweight and easy to use.
• Customizable animations.
• Easy structure.
• Accessible.
• Keyboard navigation.
• Fully styleable via CSS.

How to use it:

1. Load the necessary jQuery library and Velocity.js from CDN.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script> 

2. Download, unzip and include the jQuery tabtab.js script after jQuery library.

<script src="src/tabtab.js"></script> 

3. Create tab navigation & tabbed content panels with plain Html structure as follow.

<div class="tabdemo my-tabs">

  <ul class="tab-menu menu">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
  </ul>

  <div class="tab-content content">
    <div class="tab-content-item">
      <p>Tabbed content 1</p>
    </div>
    <div class="tab-content-item">
     <p>Tabbed content 2</p>
    </div>
    <div class="tab-content-item">
      <p>Tabbed content 3</p>
    </div>
</div>

</div>

4. Call the function on the parent container and setup the plugin.

$(".my-tabs").tabtab({

// SETUP OPTIONS HERE

})
});

5. Add your own CSS styles to the tabs plugin.

.tabdemo ul {
  margin: 0;
  padding: 0
}

.tabdemo .tab-content-item { max-width: 1250px }

.my-tabs { margin: 0 auto }

.my-tabs .tab-content-item {
  padding: 50px;
  background: #f9f9f9;
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  font-size: 19px;
  line-height: 32px
}

.my-tabs .tab-menu {
  margin-bottom: 50px;
  display: table;
  width: 100%
}

.my-tabs li {
  cursor: pointer;
  padding: 0 20px;
  display: table-cell;
  text-align: center
}

.my-tabs li:first-of-type { padding-left: 0 }

.my-tabs li:last-of-type { padding-right: 0 }

.my-tabs li a {
  background-color: #f9f9f9;
  border-radius: 1px;
  padding: 20px 40px;
  display: block
}

.my-tabs li.active a {
  background-color: #fff;
  border-radius: 1px;
  box-shadow: 0 2px 2px rgba(0,0,0,.33)
}

.my-tabs li a { text-decoration: none }

6. All the default options.

$(".my-tabs").tabtab({

// direct container of the tab menu items
tabMenu: '.tabs__menu', 

// direct container of the tab content items
tabContent: '.tabs__content',   

// next slide trigger
next: '.tabs-controls__next',

// previous slide trigger
prev: '.tabs-controls__prev',   

// starting slide on pageload
startSlide: 1,  

// keyboard arrow navigation
arrows: true,   

// if true the height will dynamic and animated
dynamicHeight: true,

// disables animations.
useAnimations: true,

// http://julian.com/research/velocity/#easing
easing: 'ease', 

// animation speed
speed: 350, 

// delay the animation
slideDelay: 0,  

// set 3D perspective
perspective: 1200,  

// set the center point of the 3d animation
transformOrigin: 'center top',  

// camera angle
perspectiveOrigin: '50% 50%',   

// animate along the Y axis (val: px or ‘slide’)
translateY: 0,  

// animate along the X axis (val: px or ‘slide’)
translateX: 0,  

// animate scale (val: 0-2)
scale: 1,   

// animate rotation (val: 0deg-360deg)
rotateX: 90,

// animate Y acces rotation (val: 0deg-360deg)
rotateY: 0, 

// animate Y skew (val: 0deg-360deg)
skewY: 0,   

// animate X skew (val: 0deg-360deg)
skewX: 0,   

})
});

---

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