Animated Tabs Plugin With jQuery And CSS3 - anitabs

Yet another jQuery based animated tabs component that enables you to switch between tabbed content with slide or crossfade animations based on CSS3.

The tabs component automatically adjusts the height depending on the height of its content.

Also comes with a LavaLamp effect that slides the underline of tabs navigation to enhance the user experience.

How to use it:

1. Load jQuery JavaScript library and the jQuery anitabs plugin's files as usual.

<link rel="stylesheet" href="css/anitabs.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/anitabs.js" ></script>

2. The required html structure for the tabs component.

<div class="tabs js-tabs">
  <div class="tabs-nav js-tabs-nav" id="example">
    <ul class="tabs-nav__list">
      <li class="tabs-nav__item js-tabs-item active">
        <a class="tabs-nav__link js-tabs-link" href="#tab-1">First tab</a>
      </li>
      <li class="tabs-nav__item js-tabs-item">
        <a class="tabs-nav__link js-tabs-link" href="#tab-2">Second tab</a>
      </li>
      <li class="tabs-nav__item js-tabs-item">
        <a class="tabs-nav__link js-tabs-link" href="#tab-3">Third tab</a>
      </li>
    </ul>
    <span class="tabs-nav__drag js-tabs-drag"></span>
  </div>
  <div class="tabs-content js-tabs-wrap">
    <div class="tab js-tabs-content active" id="tab-1">
      First Content
    </div>
    <div class="tab js-tabs-content" id="tab-2">
      Second Content
    </div>
    <div class="tab js-tabs-content" id="tab-3">
      Third Content
    </div>
  </div>
</div>

3. Call the function aniTabs() on the tabs navigation. Done.

$(".js-tabs-link").aniTabs();

4. Change the default animation to 'slide'.

$(".js-tabs-link").aniTabs({
  animation:"slide", 
  slideDirection:"left" // or right
});

5. Set the animation speed in milliseconds.

$(".js-tabs-link").aniTabs({
  animationSpeed: 1000 // default: 500
});

6. Enable/disable the autoheight functionality.

$(".js-tabs-link").aniTabs({
  autoHeight: false // default: true 
});

---

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