Archive: jQuery Smart Tab v2

flexible jQuery Tab Control plug-in

jQuery Smart Tab is a jQuery plugin for tabbed interface. It is flexible and very easy to implement. It has a lot of features that you will love and it is completely open source. It can load ajax contents, have a verity of themes, cool animation effects, event supports, easy to customize.



Download jQuery Smart Tab v2.0.0


  • Ajax Contents: It can load ajax contents
  • Browser Support: Support all modern browsers
  • Auto Height: Automatically adjust the content height
  • Save State: Automatically saves the current tab position and regain on page load
  • Auto Progress: option for automatic navigation of tabs.
  • Keyboard Navigation: Use left/right keyboard keys to navigate through tabs
  • Transition Effects:- Cool transition effects (hslide/vslide/slide/fade )on tab transition.
  • Easy to implement, Minimal HTML required.
  • Customizable Easily customisable theme and tab anchors
  • Event Support: OnLeaveTab and OnShowTab events
  • External anchors: External anchors can be used for tab navigation


  1. jQuery
Include Smart Tab JavaScript & CSS files
<script type="text/javascript" src="js/jquery.smartTab.min.js"></script>
<link href="styles/smart_tab.css" rel="stylesheet" type="text/css">
Initialize Smart Tab
The HTML Markup
<div id="tabs">
    <li><a href="#tabs-1">Tab 1<br /><small>This is tab's description</small></a></li>
    <li><a href="#tabs-2">Tab 2<br /><small>This is tab's description</small></a></li>
    <li><a href="#tabs-3">Tab 3<br /><small>This is tab's description</small></a></li>
    <li><a href="#tabs-4">Tab 4<br /><small>This is tab's description</small></a></li>

  <div id="tabs-1">
    <h2>Tab 1 Content</h2>
  <div id="tabs-2">
    <h2>Tab 2 Content</h2>
  <div id="tabs-3">
    <h2>Tab 3 Content</h2>
  <div id="tabs-4">
    <h2>Tab 4 Content</h2>
That is it!

More Options

With Parameters
  selected: 0,  // Selected Tab, 0 = first tab
  saveState:true, // Remembers tab selection
  contentURL:null, // content url, Enables Ajax content loading. ex: 'service.php'
  contentCache:true, // Cache Ajax content
  keyNavigation:true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
  autoProgress:false, // Auto navigate tabs on interval
  progressInterval: 3500, // Auto navigate Interval (used only if "autoProgress" is set to true)
  stopOnFocus:false, // Stop auto navigation on focus and resume on outfocus
  transitionEffect:'none', // Effect on navigation, none/hslide/vslide/slide/fade
  transitionSpeed:'400', // Transition animation speed
  transitionEasing:'easeInOutExpo', // Transition animation easing
  autoHeight:true, // Automatically adjust content height
  onLeaveTab: null, // triggers when leaving a tab
  onShowTab: null  // triggers when showing a tab
Ajax Contents
  contentURL: 'service.php',
  contentCache: false
  onLeaveTab: function(){ alert("Tab is leaving") },
  onShowTab: function(){ alert("Tab is shown") }
Using External Anchors
// Smart Tab
  autoProgress: false,

function showST(tab_index) {
  $('#tabs').smartTab('showTab', tab_index);
<a class="stLinks" onclick="showST(0);" href="#">Show Tab 1</a>
<a class="stLinks" onclick="showST(1);" href="#">Show Tab 2</a>
<a class="stLinks" onclick="showST(2);" href="#">Show Tab 3</a>
<a class="stLinks" onclick="showST(3);" href="#">Show Tab 4</a>


Released under the terms of the MIT License (more). You are free to use on both personal and commercial environment as long as the copyright header is left intact.

A little help is always a beautiful thing...

We are committed to deliver free and open source projects. Your support keep us on the track and make us deliver bigger things for you.

Dipu Raj

Dipu Raj

Full-stack developer in JavaScript, PHP and C# with added interest in Angular, React, jQuery and Bootstrap. Believes the code should be as beautiful as the design.