Multi-purpose jQuery Tabs Interface Plugin - Tabs.js

Tabs.js is a lightweight jQuery plugin which helps you to present sectioned content in a horizontal/vertical or accordion-style tabbed interface.

More features:

• Custom animation types.
• Configurable animation speed.
• Callback functions.
• Supports hash change.
• Cross browser.

How to use it:

1. Load the jQuery tabs.js plugin after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="build/js/tabs.js"></script>

2. Below is a very basic setup for the tabs. Just providing 3 simple tabs and minimal styling.

• data-tab: target content
• data-tab-content: content
• data-tabs-default: default tab

<div class="basic-tabs tab-container">
  <a data-tab="#basic-tab1" href="#">Tab 1</a>
  <a data-tab="#basic-tab2" href="#">Tab 2</a>
  <a data-tab="#basic-tab3" href="#">Tab 3</a>

  <div data-tab-content data-tabs-default id="basic-tab1">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p>
  </div>
  <div data-tab-content id="basic-tab2">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>
  </div>
  <div data-tab-content id="basic-tab3">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus?</p>
  </div>
</div>

$('.basic-tabs [data-tab]').tabs();

3. Below is a very basic setup for the tabs. Just providing 3 simple tabs and with the tab links positioned to the side.

<div class="side-tabs tab-container">
  <div class="tab-links">
      <a data-tab="#side-tab1" href="#">Tab 1</a>
      <a data-tab="#side-tab2" href="#">Tab 2</a>
      <a data-tab="#side-tab3" href="#">Tab 3</a>
  </div>

  <div class="tab-content">
      <div data-tab-content id="side-tab1">
          <h2>Tab 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>
      </div>
      <div data-tab-content data-tabs-default id="side-tab2">
          <h2>Tab 2</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>
      </div>
      <div data-tab-content id="side-tab3">
          <h2>Tab 3</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>
      </div>
  </div>
</div>

$('.side-tabs [data-tab]').tabs();

4. Below is a simple way to turn the tabs into an accordion.

<div class="accordion-tabs tab-container">

  <a data-tab="#accordion-tab1" href="#">Tab 1</a>

  <div data-tab-content id="accordion-tab1">
      <h2>Tab 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>
  </div>

  <a data-tab="#accordion-tab2" href="#">Tab 2</a>

  <div data-tab-content id="accordion-tab2">
      <h2>Tab 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>
  </div>

  <a data-tab="#accordion-tab3" href="#">Tab 3</a>

  <div data-tab-content data-tabs-default id="accordion-tab3">
      <h2>Tab 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>
  </div>
</div>

$('.accordion-tabs [data-tab]').tabs({
  inAnimation: 'slideDown',
  outAnimation: 'slideUp',
  speed: 200,
  animationComplete: function(tab) {
    var top = $(tab).position().top;

    $(window).scrollTop(top);

    console.log(top);
  }
});

5. Default configuration options.

$('.accordion-tabs [data-tab]').tabs({

  // fadeIn, slideDown, show, hide
  inAnimation: 'show',
  outAnimation: 'hide',

  // animation speed
  speed: 0,

  // CSS class for active tab
  activeClass: 'tab-active',

  // callback functions
  complete: function(element, tab) {},
  animationComplete: function(tab) {},

  // watch the url for hash changes to trigger tabs
  watchHash: true,

  // open a default tab based on the url hash
  defaultFromHash: true
  
});

---

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