Responsive Sliding Tabs Plugin with jQuery - Tabs.js

File Size: 14.2 KB
Views Total: 11588
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Sliding Tabs Plugin with jQuery - Tabs.js

Tabs.js is a simple, semantic, responsive and SEO-friendly jQuery tabs plugin which allows the visitor to slide between different sections of content using jQuery animate() method. The plugin automatically checks the viewport's size and turn the tabs into a dropdown menu in mobile view.

How to use it:

1. Load the jQuery tabs.js plugin's stylesheet in the head section of the document.

<link rel="stylesheet" href="css/tabs.css">

2. Add tabs and corresponding content sections to your webpage.

<div id="demo" class="tabs-main-wrapper">

  <ul class="tabs">
    <li class="active"><a href="#panel-1">TAB One</a></li>
    <li><a href="#panel-2">TAB Two</a></li>
    <li><a href="#panel-3">TAB Three</a></li>
  </ul>
  
  <div class="tabs-container">
  <div class="t-c clearfix" style="width: 400%;">
    <section class="tabs-contents active" id="panel-1">
      <h1>Content One</h1>
    </section>
    <section class="tabs-contents" id="panel-2">
      <h1>Content Two</h1>
    </section>
    <section class="tabs-contents" id="panel-3">
      <h1>Content Three</h1>
    </section>
  </div>
  </div>
  
</div>

3. Load the jQuery tabs.js plugin's script along with jQuery library a tthe end of the document.

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

4. Active the tabs plugin.

$('#demo').tabsA();

5. Default plugin settings.

$('#demo').tabsA({

  // width
  width : 750,

  // CSS class for tabs container
  containerClass  : 'tabs-main-wrapper',

  // initial tab
  defaultTab  : 0
  
});

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