jQuery Tabs Plugin & Tutorials with Example

jQuery Responsive Tabs Plugin

jQuery Responsive Tabs Plugin

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

Features:

  • Tabs transform to accordion based on breakpoint
  • Uses javascript / jQuery for the technical tab switching (class based)
  • Uses CSS for the desktop/tablet/mobile view
  • Has callback events for the tab events
  • Tabs can be opened with URL hashes
  • Tabs can auto rotate
  • Tabs can be collapsed (optional)
  • Tabs can start collapsed based on the view (optional)
  • Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)
  • Multiple device support (Web, Tablet, Mobile, etc)

Responsive Full Width Tabs with CSS & JavaScript

Responsive Full Width Tabs with CSS & JavaScript

A full width tab component with some example media queries for adjusting the icons of the tabs and the content layout. The main idea is to show only icons for the mobile view and allow the text to appear when there’s enough space. The content columns and the containing media boxes have three different layouts.

Tabcordion.js : jQuery Plugin for Bootstrap tabs into Accordion

Tabcordion.js : jQuery Plugin for Bootstrap tabs into Accordion

Bootstrap Tabcordion is a simple jQuery plugin that transforms a set of Bootstrap tabs into a Bootstrap accordion. It can be configured to perform this transformation based on the size of the container or viewport to provide responsive awesomeness to your buzzword-rich UI.Useful for responsive mobile sites.

jQuery Responsive Tabs Plugin

jQuery Responsive Tabs Plugin

jQuery plugin for creating responsive tabs. The controls behave like regular tabs above a specified screen width (defined by an editable media query in the associated css file), and behave like an accordion on screens below that width.

Features:

  • Progressive enhancement – uses semantic heading/content markup – tabs and accordion are created entirely with jQuery
  • Uses Aria attributes and roles to aid screen reader accessibility
  • Tabs and their content are fully accessible via keyboard
  • Supports multiple sets of tabs on same page

Ion.Tabs : jQuery tabs plugin

Ion.Tabs : jQuery tabs plugin

jQuery tabs plugin.Easy and well done tabs with many options and skin support.

Description:

  • Supports many groups of tabs at one page.
  • Generate events and callbacks.
  • Support many types of position saving, for each tabs group on the page.
  • Very easy in set up and customisation. Has skin support.
  • Has public methods for outside control.
  • Cross-browser support: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
  • Ion.Tabs supports touch-devices (iPhone, iPad, etc.).

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.



Best jQuery websites design awards