jQuery Tabs Plugin & Tutorials with Example

jQuery Bootstrap Steps Wizard

jQuery Bootstrap Steps Wizard

This Twitter Bootstrap plugin builds a wizard using a formatted tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.

PWS Tabs : jQuery Animated Tabs Plugin

PWS Tabs : jQuery Animated Tabs Plugin

jQuery Plugin to create tabs.All you need to do is add few divs for your tabs, and script will generate Tabs for you.

jQuery Responsive Tabs

jQuery Responsive Tabs

This jQuery plugin provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint.

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)
  • The tabs are controllable with API methods
  • Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)

Tabulous.js : jQuery Animated Tabs Plugin

Tabulous.js : jQuery Animated Tabs Plugin

A jQuery tabs module for todays web.Tabulous.js can be used with any contents you choose in the tabs and it couldn’t be more simpler to use.

Responsive Tabbed Navigation with CSS3 & jQuery

Responsive Tabbed Navigation with CSS3 & jQuery

A handy tabbed navigation, optimized for mobile devices, with support for both horizontal and vertical menu positioning.

Tab Styles Inspiration with CSS3 & SVG

Tab Styles Inspiration with CSS3 & SVG

Today we’d like to share a couple of tab styles with you. We use pseudo-elements, SVGs and CSS transitions for some of the techniques.The collection contains some styles and effects for modern tabs; from a simple box to a SVG shape. Depending on your design, different tab layouts and looks can spice up your sections; think outside of the box (literally) and you’ll see how interesting the usually boring tabs can become.

Hash Tabs : Ultimate jQuery Animated Tab plugin

Hash Tabs : Ultimate jQuery Animated Tab plugin

The ultimate jQuery tab plugin forhash-sensitive,WAI-ARIA-complianttabs.

Features:

  • Hash-friendly URLs, so your states are saved. Try refreshing!
  • Compatible with IE8 and up
  • Customizable and configurable. Use custom selectors for your tabs. Default uses nav and section elements
  • noscript-friendly. Works very will in non-javascript browsers. When tabs can’t be loaded, content feels like normal, as hashes are supported natively by the browser.
  • Customizable SASS styles.

Codetabs B+ : Premium Tabs + Slider For Bootstrap

Codetabs B+ : Premium Tabs + Slider For Bootstrap

Codetabs is a great plug-in tabs + slider when integrated gestrue swipe, move between slides really easy on desktop and mobile. No need to switch troublesome dropdown menu as the other plugin on the mobile. Same time create thousands of beautiful effects with built-in over 250 ‘out-in’ effects and ‘one’. Also, codetabs built-in responsive features, vertical tabs, flat and clean theme, powerfull API, 40+ templates html, 14+ positions, 100+ options, more and more.

CodeTabs – jQuery Touch Responsive Tabs

CodeTabs - jQuery Touch Responsive Tabs

Codetabs is a great plug-in tabs when integrated gestrue swipe, move between slides really easy on desktop and mobile. No need to switch troublesome dropdown menu as the other plugin on the mobile. Same time create thousands of beautiful effects with built-in over 250 ‘out-in’ effects and ‘one’. Also, codetabs built-in responsive features, vertical tabs, flat and clean theme, powerfull API, 40+ templates html, 14+ positions, 100+ options, more and more.

Toolkit : Front-End UI toolkit built with HTML5, CSS3, jQuery

Toolkit : Front-End UI toolkit built with HTML5, CSS3, jQuery

Titon Toolkit is a collection of very powerful user interface components and utility classes for the responsive, mobile, and modern web. Each component represents encapsulated HTML, CSS, and JavaScript functionality for role specific page elements.

Toolkit makes use of the latest and greatest technology. This includes HTML5 for semantics, CSS3 for animations and styles, Sass for CSS pre-processing, Grunt for task and package management, and powerful new browser APIs for the JavaScript layer.



Best jQuery websites design awards