Best jQuery Tabs Plugins & Tutorials with Demo

Tabslet : A jQuery plugin for Tabs with Extra Features

Tabslet : A jQuery plugin for Tabs

Yet another jQuery plugin for tabs with some extra features.

Beyond the standard tabs functionality:

  • Change tabs on mouse over
  • Use animation effect for tabs’ changing
  • Ability to use either href or alt attribute to target tab
  • Rotation
  • Custom events

Tabdrop.js : jQuery Tab drop for Bootstrap

Tabdrop.js : jQuery Tab drop for Bootstrap

Very usefull script when your tabs do not fit in a single row. This script takes the not fitting tabs and makes a new dropdown tab. In the dropdown there are all the tabs that do not fit.

  • works only with horizontal tabs and pills
  • custom text for the dropdown tab
  • works with responsive design

Scrolltab : jQuery plugin to add Position Relative Tabs

Scrolltab : jQuery plugin to add Position Relative Tabs

Scrolltab is a jQuery plugin that adds tabs visually associated to their position relative to the scroll bar.

This enables a developer to attach floating tabs to the scrollbar of the brwoser that will scroll the user to the position indicated by the tab. This tab is expandable with content within.

Tabby : Lightweight & Mobile-first toggle Tabs

Tabby : Lightweight & Mobile-first toggle Tabs

Tabby is a lightweight JavaScript and CSS kit for mobile-first toggle tabs. It’s style-light so you can easily modify it to fit your design.

tabview : Responsive Tabs for jQuery Mobile

tabview : Responsive Tabs for jQuery Mobile

Tabview is a tabs plugin for jQuery Mobile.Tabs are now easier to manage using pure CSS. Just add the number of tabs you need usingdata-tabs="1-10" along with data-type="tabs" to the collapsible set. Also, by default tabs fallback to a regular collapsible-sets on small screens (see example). If you don’t want this, just remove the media query and tabs will be tabs at any screen size.

jQuery Tabs Plugin

jQuery Tabs Plugin

The powerful jQuery plugin that creates a tab.

Features:

  • History support — tabs can handle browser’s back and forward buttons
  • AJAXed tabs support — ajax load content support
  • Keyboard navigation support — use Arrow left/right to navigate
  • Lightweight size — 1 kb gzipped

jQuery Easy Responsive Tabs to Accordion

jQuery Easy Responsive Tabs to Accordion

Easy responsive tabs – is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.

Features:

  • Horizontal / Vertical Tabs to Accordion
  • Tabs and accordion are created entirely with jQuery
  • Supports multiple sets of tabs on same page
  • Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)
  • Multi device support (Web, Tablets & Mobile)

Navi.js : jQuery Content Switcher

Navi.js : jQuery Content Switcher

Navi makes it easy to dynamically display content on your sites. Instead of cluttering up your site tree with extra files, you can easily write all of your html code for multiple pages in one file.

Navi was created to be an easy way for anyone wanting to change content. This plugin can help with the development of numerous other plugins including: tabs, pagination, image sliders, and others. Navi has serveral options to tweak and allows for loading content based on the page hash. You can call Navi on multiple elements with ease so you can have multiple content switching sections.Navi is also friendly with other plugins, and can be called on multiple objects or nested.

Mate Tabs : jQuery Responsive tabs and accordion

Mate Tabs : jQuery Responsive tabs and accordion

Mate Tabs it is a responsive tabs and accordion.

Features :

  • Responsive
  • Retina ready (Font Awesome integrated)
  • Parameters when tabs transform to accordion: 1. Auto 2. Now 3. Your screen size
  • Click or Hover events
  • jQuery 1.7.1 +
  • Fast changing the color palette: panelColor: ’#fec901’,borderColor: ’#fec901’,contentColor: ’#ffffff’ etc…
  • Simple to use
  • Live preview
  • Cross Browsers

Cream Tabs : jQuery Plugin

Cream Tabs : jQuery Plugin

Cream Tabs it is a mix of tabs and navigation menu with content slider.

Features:

  • Retina ready (Font Awesome integrated)
  • Simple to use
  • Live preview
  • Cross Browsers
  • Content Slider
  • Fully customizable
  • Min version: 6 kb
  • Allow multiple connections
  • Menu position: vertical/horizontal
  • Position on screen: coordinates or auto
  • Simple change color