PHPackages techlab/jquery-smarttab - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. techlab/jquery-smarttab ActiveLibrary techlab/jquery-smarttab ======================= The flexible jQuery tab control plugin v4.0.2(3y ago)4212513[6 issues](https://github.com/techlab/jquery-smarttab/issues)[5 PRs](https://github.com/techlab/jquery-smarttab/pulls)MITJavaScript Since May 3Pushed 3y ago2 watchersCompare [ Source](https://github.com/techlab/jquery-smarttab)[ Packagist](https://packagist.org/packages/techlab/jquery-smarttab)[ Docs](http://techlaboratory.net/jquery-smarttab)[ Fund](https://www.paypal.me/dipuraj)[ GitHub Sponsors](https://github.com/techlab)[ RSS](/packages/techlab-jquery-smarttab/feed)WikiDiscussions master Synced 5d ago READMEChangelog (5)DependenciesVersions (12)Used By (0) jQuery Smart Tab v4 =================== [](#jquery-smart-tab-v4) #### The flexible jQuery tab control plugin [](#the-flexible-jquery-tab-control-plugin) [![Build Status](https://camo.githubusercontent.com/b2dcea7059761b4a8e7bee3362916702d190f79adfb053cfb33c0ca451471a8a/68747470733a2f2f7472617669732d63692e6f72672f746563686c61622f6a71756572792d736d6172747461622e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/techlab/jquery-smarttab)[![npm version](https://camo.githubusercontent.com/ce27eec5eec565e869b39ff22527a6f42263a133b4f979aa8b1f5a86a53a6609/68747470733a2f2f62616467652e667572792e696f2f6a732f6a71756572792d736d6172747461622e737667)](https://badge.fury.io/js/jquery-smarttab)[![jsDelivr Hits](https://camo.githubusercontent.com/9215603ee785b780f3ef4c4b9b21f0f879ff98bc1fe74e2a7ce23b649c65ca5b/68747470733a2f2f646174612e6a7364656c6976722e636f6d2f76312f7061636b6167652f6e706d2f6a71756572792d736d6172747461622f62616467653f7374796c653d726f756e646564)](https://www.jsdelivr.com/package/npm/jquery-smarttab)[![Npm Downloadsl](https://camo.githubusercontent.com/e511c50332f1e3c0b0636e4f3ed1684a0b31d50926f749bbff335952f0669526/68747470733a2f2f62616467656e2e6e65742f6e706d2f646d2f6a71756572792d736d6172747461623f69636f6e3d6e706d)](https://www.npmjs.com/package/jquery-smarttab)[![GitHub license](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)](https://raw.githubusercontent.com/techlab/jquery-smarttab/master/LICENSE)[![GitHub Sponsor](https://camo.githubusercontent.com/5be0458640e24974f9d46e0648fee60f3abcc9e6eceb5b91bd671d27b609f782/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f53706f6e736f722d746563686c61622d626c75652e7376673f6c6f676f3d676974687562)](https://github.com/sponsors/techlab)[![Donate on Paypal](https://camo.githubusercontent.com/bf1848c0d1ba3e3e17c897150508cb302e71eab897db4e823e745049924f3659/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f50617950616c2d6469707572616a2d626c75652e737667)](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 ----- [](#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 ----------- [](#screenshots) [![jQuery Smart Tab](https://camo.githubusercontent.com/e7dc0512bfd4c40637480458b3076a82a50f41e6043959a759d57da86649788c/68747470733a2f2f746563686c61626f7261746f72792e6e65742f6173736574732f6d656469612f6a71756572792d736d6172742d7461622f76342f73742d76342d62617369632e676966)](https://camo.githubusercontent.com/e7dc0512bfd4c40637480458b3076a82a50f41e6043959a759d57da86649788c/68747470733a2f2f746563686c61626f7261746f72792e6e65742f6173736574732f6d656469612f6a71756572792d736d6172742d7461622f76342f73742d76342d62617369632e676966) [![jQuery Smart Tab](https://camo.githubusercontent.com/276e86ef33415337fc6e371ab9a28885a991553d31428068251dc5b29aedec10/68747470733a2f2f746563686c61626f7261746f72792e6e65742f6173736574732f6d656469612f6a71756572792d736d6172742d7461622f76342f73742d76362d627269636b2e706e67)](https://camo.githubusercontent.com/276e86ef33415337fc6e371ab9a28885a991553d31428068251dc5b29aedec10/68747470733a2f2f746563686c61626f7261746f72792e6e65742f6173736574732f6d656469612f6a71756572792d736d6172742d7461622f76342f73742d76362d627269636b2e706e67) [![jQuery Smart Tab](https://camo.githubusercontent.com/4ef1173332adcfba02c0e1d2f2e4307af29392ceac827feabc1a9dbe2fca1266/68747470733a2f2f746563686c61626f7261746f72792e6e65742f6173736574732f6d656469612f6a71756572792d736d6172742d7461622f76342f73742d76362d62617369632e706e67)](https://camo.githubusercontent.com/4ef1173332adcfba02c0e1d2f2e4307af29392ceac827feabc1a9dbe2fca1266/68747470733a2f2f746563686c61626f7261746f72792e6e65742f6173736574732f6d656469612f6a71756572792d736d6172742d7461622f76342f73742d76362d62617369632e706e67) [![jQuery Smart Tab](https://camo.githubusercontent.com/c1af2075fdcfcdaa82b33b0da1856f0eb1728fdb380423d5f7ddc9703acb29f0/68747470733a2f2f746563686c61626f7261746f72792e6e65742f6173736574732f6d656469612f6a71756572792d736d6172742d7461622f76342f73742d76362d70696c6c732e706e67)](https://camo.githubusercontent.com/c1af2075fdcfcdaa82b33b0da1856f0eb1728fdb380423d5f7ddc9703acb29f0/68747470733a2f2f746563686c61626f7261746f72792e6e65742f6173736574732f6d656469612f6a71756572792d736d6172742d7461622f76342f73742d76362d70696c6c732e706e67) Requirements ------------ [](#requirements) - [jQuery](http://jquery.com/) (supports jQuery 1.11.1+ to jQuery 3.6+ and jQuery Slim versions) Installation ------------ [](#installation) ### [NPM](https://www.npmjs.com/package/jquery-smarttab) [](#npm) ``` npm install jquery-smarttab ``` ### [Yarn](https://yarn.pm/jquery-smarttab) [](#yarn) ``` yarn add jquery-smarttab ``` ### [CDN - jsDelivr](https://www.jsdelivr.com/package/npm/jquery-smarttab) [](#cdn---jsdelivr) ``` ``` ### [CDN - UNPKG](https://unpkg.com/browse/jquery-smarttab/) [](#cdn---unpkg) ``` ``` ### Common JS/Webpack [](#common-jswebpack) ``` var $ = require("jquery"); require( "jquery-smarttab/dist/css/smart_tab_all.css"); const smartTab = require("jquery-smarttab"); $(function() { $('#smarttab').smartTab(); }); ``` ### ES6/Babel [](#es6babel) ``` 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 [](#note-you-may-have-to-install-the-required-dependencies) ``` 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) #### [Download from GitHub](https://github.com/techlab/jquery-smarttab/archive/master.zip) [](#download-from-github) Features -------- [](#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 ----- [](#usage) Include jQuery SmartTab CSS ``` ``` Include HTML ``` Tab 1 Tab 2 Tab 3 Tab 4 Tab content Tab content Tab content Tab content ``` Include jQuery (*ignore this if you have already included on the page*). ``` ``` Include jQuery SmartTab JavaScript ``` ``` Initialize the jQuery SmartTab ``` $(function() { // SmartTab initialize $('#smarttab').smartTab(); }); ``` That's it! Please see the [documentation](http://techlaboratory.net/jquery-smarttab#documentation) for more details on implementation and usage. ##### All options [](#all-options) ``` // SmartTab initialize $('#smarttab').smartTab({ selected: 0, // Initial selected tab, 0 = first tab theme: 'basic', // theme, related css need to include for other than default theme 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 step based on url hash transition: { animation: 'none', // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify) speed: '400', // Animation speed. Not used if animation is 'css' easing: '', // Animation easing. Not supported without a jQuery easing plugin. Not used if animation is 'css' prefixCss: '', // Only used if animation is 'css'. Animation CSS prefix fwdShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on forward direction fwdHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on forward direction bckShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on backward direction bckHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on backward direction }, 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 }, keyboard: { keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled) keyLeft: [37, 38], // Left key code keyRight: [39, 40], // Right key code keyHome: [36], // Home key code keyEnd: [35] // End key code }, style: { // CSS Class settings mainCss: 'st', navCss: 'nav', navLinkCss: 'nav-link', contentCss: 'tab-content', contentPanelCss: 'tab-pane', themePrefixCss: 'st-theme-', justifiedCss: 'st-justified', anchorDefaultCss: 'default', anchorActiveCss: 'active', loaderCss: 'st-loading' }, getContent: null }); ``` License ------- [](#license) [MIT License](https://github.com/techlab/jquery-smarttab/blob/master/LICENSE) Contribute ---------- [](#contribute) If you like the project please support with your contribution. [GitHub Sponsor](https://github.com/sponsors/techlab) [Donate on Paypal](https://www.paypal.me/dipuraj) Happy Coding ❤️ ### Health Score 32 — LowBetter than 72% of packages Maintenance17 Infrequent updates — may be unmaintained Popularity24 Limited adoption so far Community15 Small or concentrated contributor base Maturity62 Established project with proven stability Bus Factor1 Top contributor holds 87% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~163 days Recently: every ~194 days Total 6 Last Release 1385d ago Major Versions v3.x-dev → v4.0.12022-07-10 ### Community Maintainers ![](https://www.gravatar.com/avatar/5c126b08e48aa49997c9019a4b1a281a17194eddbb5311e526f938a132fff610?d=identicon)[techlab](/maintainers/techlab) --- Top Contributors [![techlab](https://avatars.githubusercontent.com/u/511092?v=4)](https://github.com/techlab "techlab (20 commits)")[![jblotus](https://avatars.githubusercontent.com/u/382230?v=4)](https://github.com/jblotus "jblotus (2 commits)")[![chinuy](https://avatars.githubusercontent.com/u/1298520?v=4)](https://github.com/chinuy "chinuy (1 commits)") --- Tags ajax-contentsjavascriptjqueryjquery-pluginsmarttabtablayouttabspluginuijquerybootstrapjquery-pluginstepssteptabs ### Embed Badge ![Health badge](/badges/techlab-jquery-smarttab/health.svg) ``` [![Health](https://phpackages.com/badges/techlab-jquery-smarttab/health.svg)](https://phpackages.com/packages/techlab-jquery-smarttab) ``` ### Alternatives [techlab/smartwizard The awesome jQuery step wizard plugin 79096.2k2](/packages/techlab-smartwizard)[onokumus/metismenu A jQuery menu plugin 2.0k263.3k5](/packages/onokumus-metismenu)[kartik-v/bootstrap-tabs-x Extended Bootstrap Tabs with ability to align tabs in multiple ways, add borders, rotated titles, and more. 1021.3M1](/packages/kartik-v-bootstrap-tabs-x)[kartik-v/yii2-widget-rating A Yii2 widget for the simple yet powerful bootstrap-star-rating plugin with fractional rating support (sub repo split from yii2-widgets) 444.1M8](/packages/kartik-v-yii2-widget-rating)[kartik-v/yii2-widget-switchinput A Yii2 wrapper widget for the Bootstrap Switch plugin to use checkboxes & radios as toggle switchinputes (sub repo split from yii2-widgets) 384.4M13](/packages/kartik-v-yii2-widget-switchinput)[kartik-v/yii2-widget-alert A widget to generate alert based notifications using bootstrap-alert plugin (sub repo split from yii2-widgets) 284.1M24](/packages/kartik-v-yii2-widget-alert) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)