# jQuery Smart Tab v4 #### The flexible jQuery tab control plugin [![Build Status](https://travis-ci.org/techlab/jquery-smarttab.svg?branch=master)](https://travis-ci.org/techlab/jquery-smarttab) [![npm version](https://badge.fury.io/js/jquery-smarttab.svg)](https://badge.fury.io/js/jquery-smarttab) [![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/jquery-smarttab/badge?style=rounded)](https://www.jsdelivr.com/package/npm/jquery-smarttab) [![Npm Downloadsl](https://badgen.net/npm/dm/jquery-smarttab?icon=npm)](https://www.npmjs.com/package/jquery-smarttab) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/techlab/jquery-smarttab/master/LICENSE) [![GitHub Sponsor](https://img.shields.io/badge/Sponsor-techlab-blue.svg?logo=github)](https://github.com/sponsors/techlab) [![Donate on Paypal](https://img.shields.io/badge/PayPal-dipuraj-blue.svg)](https://www.paypal.me/dipuraj) Smart Tab is a flexible and heavily customizable **tab control plugin for jQuery**. > If you think it is cool, you should also check it's sibling [React Smart Tab](http://techlaboratory.net/react-smarttab) + [Homepage](http://techlaboratory.net/jquery-smarttab) + [Documentation](http://techlaboratory.net/jquery-smarttab#documentation) + [Demos](http://techlaboratory.net/jquery-smarttab#demo) + [StackOverflow Q&A](http://stackoverflow.com/questions/tagged/smart-tab) + [GitHub Issues](https://github.com/techlab/jquery-smarttab/issues) Demos ----- + [Basic Example](http://techlaboratory.net/projects/demo/jquery-smart-tab/v4) + [Ajax Contents](http://techlaboratory.net/projects/demo/jquery-smart-tab/v4/ajax) + [Multiple Tabs](http://techlaboratory.net/projects/demo/jquery-smart-tab/v4/multiple) + [Vertical Tab Layout](http://techlaboratory.net/projects/demo/jquery-smart-tab/v4/vertical) + [Bootstrap Modal Example](http://techlaboratory.net/projects/demo/jquery-smart-tab/v4/bootstrap-modal) Screenshots ----- ![jQuery Smart Tab](https://techlaboratory.net/assets/media/jquery-smart-tab/v4/st-v4-basic.gif) ![jQuery Smart Tab](https://techlaboratory.net/assets/media/jquery-smart-tab/v4/st-v6-brick.png) ![jQuery Smart Tab](https://techlaboratory.net/assets/media/jquery-smart-tab/v4/st-v6-basic.png) ![jQuery Smart Tab](https://techlaboratory.net/assets/media/jquery-smart-tab/v4/st-v6-pills.png) Requirements ----- + [jQuery](http://jquery.com/) (supports jQuery 1.11.1+ to jQuery 3.6+ and jQuery Slim versions) Installation ----- ### [NPM](https://www.npmjs.com/package/jquery-smarttab) npm install jquery-smarttab ### [Yarn](https://yarn.pm/jquery-smarttab) yarn add jquery-smarttab ### [CDN - jsDelivr](https://www.jsdelivr.com/package/npm/jquery-smarttab) ```html ``` ### [CDN - UNPKG](https://unpkg.com/browse/jquery-smarttab/) ```html ``` ### Common JS/Webpack ```js var $ = require("jquery"); require( "jquery-smarttab/dist/css/smart_tab_all.css"); const smartTab = require("jquery-smarttab"); $(function() { $('#smarttab').smartTab(); }); ``` ### ES6/Babel ```js import $ from "jquery"; import "jquery-smarttab/dist/css/smart_tab_all.css"; import smartTab from 'jquery-smarttab'; $(function() { $('#smarttab').smartTab(); }); ``` #### Note: you may have to install the required dependencies ```bash npm i jquery npm i jquery-smarttab // If you are using Webpack, install npm i webpack webpack-cli style-loader css-loader --save-dev ``` ### Download #### [Download from GitHub](https://github.com/techlab/jquery-smarttab/archive/master.zip) Features ----- - Easy to implement and minimal HTML required - Supports all modern browsers - Responsive CSS design - Bootstrap compatible - Cool themes included and can be easly customize - Easy color cusomization using CSS variables - Built-in transition animations (none|fade|slideHorizontal|slideVertical|slideSwing|css) - Transition animations can be added easly by extending - CSS Animations support for transition animations (Supports [Animate.css](https://animate.style/)) - Accessible controls - External controls support - Easy ajax content integration - Keyboard navigation - Auto content height adjustment - Buit-in loader - Buit-in events - UMD (Universal Module Definition) support - Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 3.6+, and jQuery Slim) - URL navigation and tab selection - Auto Progress (automatic navigation of tabs) Usage ----- Include jQuery SmartTab CSS ```html ``` Include HTML ```html