jQuery Plugin For Vertical and Horizontal Tabs - jQuery Tabs

This is a jQuery plugin used for generating simple, easy-to-style, vertical and/or horizontal tabs from plain html structure.

Installation:

$ npm install jquery-tabs --save

How to use it:

1. Import the jquery-tabs into your project or directly insert the JavaScript file jquery.tabs.min.js into your document.

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

2. The basic HTML structure for the tabs interface.

<div class="jq-tab-wrapper" id="myTab">
  <div class="jq-tab-menu">
    <div class="jq-tab-title active" data-tab="1">Tab 1</div>
    <div class="jq-tab-title" data-tab="2">Tab 2</div>
    <div class="jq-tab-title" data-tab="3">Tab 3</div>
  </div>
  <div class="jq-tab-content-wrapper">
    <div class="jq-tab-content active" data-tab="1">
      Tab 1 content here
    </div>
    <div class="jq-tab-content active" data-tab="2">
      Tab 2 content here
    </div>
    <div class="jq-tab-content active" data-tab="3">
      Tab 3 content here
    </div>
  </div>
</div>

3. Initialize the plugin to create a default (vertical) tabs interface.

$('#verticalTab').jqTabs();

4. Change the direction of the tabs interface to 'horizontal'.

$('#myTab').jqTabs({
  direction: 'horizontal'
});

5. Set the duration in milliseconds when fading in/out tabbed content.

$('#myTab').jqTabs({
  duration: 400
});

6. Change the default CSS classes.

$('#myTab').jqTabs({
  mainWrapperClass: 'jq-tab-wrapper',
  tabClass: 'jq-tab-title',
  tabContentClass: 'jq-tab-content'
});

7. Callback functions available.

$('#myTab').jqTabs({
  tabClicked: $.noop,
  tabContentLoaded: $.noop
});

8. Override the default CSS variables to create your own styles.

// selectors
$mainWrapper: ".jq-tab-wrapper";
$tabMenu: ".jq-tab-menu";
$tab: ".jq-tab-title";
$contentWrapper: ".jq-tab-content-wrapper";
$tabContent: ".jq-tab-content";

// properties
$tabBorder: 1px solid #d1d1d1;
$tabBgColor: #d7d7d7;
$activeTabBorder: 1px solid #505050;
$activeTabBgColor: #e4e4e4;
$mainPadding: 1em;
$tabTitlePadding: 1em 2em;
$tabContentPadding: 1em 1.8em;

---

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