rockFluidTabs

1. HTML
2. JS
3. Init
4. Styles

Use this HTML:

<div class="example">
  <ul class="nav">
    <li><a href="#alpha">Tab Alpha</a></li>
    <li><a href="#beta">Tab Beta</a></li>
    <li><a href="#gamma">Tab Gamma</a></li>
  </ul>

  <div class="tab-wrap">
    <div id="alpha">
      <!-- content of tab alpha -->
      <p>Lorem</p>
    </div>

    <div id="beta">
      <!-- content of tab beta -->
      <p>Impsum</p>
    </div>

    <div id="gamma">
      <!-- content of tab gamma -->
      <p>Dolor</p>
    </div>
  </div> <!-- END Tab Wrap -->
</div> <!-- END rockFluidTabs example -->

Add jQuery, Velocity and rockFluidTabs directly in front of the closing </body>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="js/rockFluidTabs.js"></script>

Call the plugin.

<script>
  $(function() {
    'use strict';

    $('.example').rockFluidTabs();
  });
</script>

Set the styles you want. For a simple start:

<style>
  .example .nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
  }
  .example .nav li {
    flex: 1;
    margin-left: 10px;
  }
  .example .nav li:first-child {
    margin-left: 0;
  }
  .example .nav a {
    display: block;
    color: #fff;
    background: #999;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    transition: all .2s ease;
  }
  .example .nav .current {
    background: #eee;
    color: #666;
  }
  .example .tab-wrap { background: #eee; }
  .example .tab-wrap div { padding: 20px; }
</style>

This is a plugin, so you can call it on multiple tabbed areas, which can be styled totally differently:

Options
Assumptions

You can set options to the tab like this:


$('.example').rockFluidTabs({
  // options, defaults listed

  speed: 400,
  // speed in ms

  easing: 'easeInOutQuart',
  // use one of the velocity easings http://velocityjs.org/#easing

  nav: '.nav',
  // define selector for navigation

  currentClass: '.current'
  // define current class of the navigation

  tabWrap: '.tab-wrap',
  // define selector for wrapper of tabs
});

This script makes almost no assumptions about the styling of your tabs. You are free to use the basic styling given in the example.

This is some content below the tabs. I will be moved up or down to accommodate the tabbed area above me.

rockFluidTabs

Buttery smooth tabs animated with velocity