README

The flexible jQuery tab control plugin

Smart Tab is a flexible and heavily customizable jQuery Tab control plugin.

If you think it is cool, you should also check it's sibling React Smart Tab

• Homepage
• Documentation
• Demos
• StackOverflow Q&A
• GitHub Issues

Demos

• Basic Example
• Ajax Contents
• Multiple Tabs

Screenshots

Requirements

• jQuery (supports from jQuery-1.11.1+ to the latest jQuery-3.5.0)

Installation

NPM

npm install jquery-smarttab

Yarn

yarn add jquery-smarttab

Composer

composer require techlab/jquery-smarttab

CDN - jsDelivr

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/jquery-smarttab@3.1.1/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/jquery-smarttab@3.1.1/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>

CDN - UNPKG

<!-- CSS -->
<link href="https://unpkg.com/jquery-smarttab@3.1.1/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />

<!-- JavaScript -->
<script src="https://unpkg.com/jquery-smarttab@3.1.1/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>

Download

Download from GitHub

Features

• Responsive design
• Standalone CSS
• Bootstrap compatible
• Various themes included
• Customizable CSS
• Cool transition animations (fade/slide-horizontal/slide-vertical/slide-swing)
• URL navigation and tab selection
• Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 2+, jQuery 3.5+)
• Auto content height adjustment
• Auto Progress (automatic navigation of tabs)
• Ajax content loading support
• Keyboard navigation
• External anchor support
• Custom events
• Supports all modern browsers
• Easy to implement and minimal HTML required

Usage

Include jQuery SmartTab CSS

<link href="../dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />

Include HTML

<div id="smarttab">

    <ul class="nav">
        <li>
          <a class="nav-link" href="#tab-1">
            Tab 1
          </a>
        </li>
        <li>
          <a class="nav-link" href="#tab-2">
            Tab 2
          </a>
        </li>
        <li>
          <a class="nav-link" href="#tab-3">
            Tab 3
          </a>
        </li>
        <li>
          <a class="nav-link" href="#tab-4">
            Tab 4
          </a>
        </li>
    </ul>

    <div class="tab-content">
        <div id="tab-1" class="tab-pane" role="tabpanel">
            Tab content
        </div>
        <div id="tab-2" class="tab-pane" role="tabpanel">
            Tab content
        </div>
        <div id="tab-3" class="tab-pane" role="tabpanel">
            Tab content
        </div>
        <div id="tab-4" class="tab-pane" role="tabpanel">
            Tab content
        </div>
    </div>
</div>

Include jQuery (ignore this if you have already included on the page).

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Include jQuery SmartTab JavaScript

<script type="text/javascript" src="../dist/js/jquery.smartTab.min.js"></script>

Initialize the jQuery SmartTab

<script type="text/javascript">
  $(document).ready(function(){

      // SmartTab initialize
      $('#smarttab').smartTab();

  });
</script>

That's it!

Please see the documentation for more details on implementation and usage.

All options

// SmartTab initialize
$('#smarttab').smartTab({
    selected: 0, // Initial selected tab, 0 = first tab
    theme: 'default', // theme for the tab, related css need to include for other than default theme
    orientation: 'horizontal', // Nav menu orientation. horizontal/vertical
    justified: true, // Nav menu justification. true/false
    autoAdjustHeight: true, // Automatically adjust content height
    backButtonSupport: true, // Enable the back button support
    enableURLhash: true, // Enable selection of the tab based on url hash
    transition: {
        animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
        speed: '400', // Transion animation speed
        easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
    },
    autoProgress: { // Auto navigate tabs on interval
        enabled: false, // Enable/Disable Auto navigation
        interval: 3500, // Auto navigate Interval (used only if "autoProgress" is enabled)
        stopOnFocus: true, // Stop auto navigation on focus and resume on outfocus
    },
    keyboardSettings: {
        keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
        keyLeft: [37], // Left key code
        keyRight: [39] // Right key code
    }
});

License

MIT License

Contribute

If you like the project please support with your contribution.

Donate on Paypal

Thank you and Happy Coding!