Simple jQuery Responsive Tabs Interface Plugin - jQueryTab

Yet another jQuery tabs plugin for creating responsive tabbed panels with many options and CSS3 transition animations support.

Features:

• Automatically converts the tabs into the accordion interface in smaller devices like iPad, iPhone, etc...
• Remembers last active tab using cookie.
• Keyboard navigation.
• Supports browser history API.
• Open on click or hover.
• 4 tabs transitions: fade|flip|scaleUp|slideLeft.
• 2 accordion transitions: normal and slide.

How to use it:

1. Include jQuery javascript library on the web page.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. Include the jQueryTab plugin's CSS and JavaScript on the page.

<!-- Core Stylesheet -->
<link rel="stylesheet" href="jQueryTab.css" />
<!-- CSS3 Animations -->
<link rel="stylesheet" href="animation.css" />
<!-- Main JavaScript -->
<script src="js/jQueryTab.js"></script> 

3. Create tabs and tabbed content following the html structure as shown below:

<div class="tabs-demo">
  <ul class="tabs">
    <li><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
    <li><a href="#tab3">Tab3</a></li>
    <li><a href="#tab4">Tab4</a></li>
  </ul>
  <section class="tab_content" id="tab1">
    <p> Tabbed Conternt 1</p>
  </section>
  <section class="tab_content" id="tab2">
    <p>Tabbed Conternt 2</p>
  </section>
  <section class="tab_content" id="tab3">
    <p>Tabbed Conternt 3</p>
  </section>
  <section class="tab_content" id="tab4">
    <p>Tabbed Conternt 4</p>
  </section>
</div>

4. Initialize the plugin on the top container and done.

$('.tabs-demo').jQueryTab({
  // options here
});

5. All available options to customize the tabs.

$('.tabs-demo').jQueryTab({

  // class of the tabs
  tabClass:'tabs',            

  // class of the header of accordion on smaller screens
  accordionClass:'accordion_tabs',  

  // class of content wrapper
  contentWrapperClass:'tab_content_wrapper',    

  // class of container
  contentClass:'tab_content',   

  // name of the class used for active tab
  activeClass:'active',     

  // enable accordion on smaller screens
  responsive:true,        

  // the breakpoint
  responsiveBelow:600,            

  // allow all tabs to collapse on accordions
  collapsible:true,       

  // remember last active tab using cookie
  useCookie: true,        

  // open tab on hover
  openOnhover: false,         

  // use the history api
  useHistory: true,               

  // use keyboard for navigation
  keyboardNavigation: true,       
  
  // position of tab - top|bottom
  tabPosition: 'top',          

  // tab to open initially; start count at 1 not 0
  initialTab: 1,          

  // name of the cookie set to remember last active tab
  cookieName: 'active-tab',   

  // when it expires in days or standard UTC time
  cookieExpires: 365,       

  // path on which cookie is accessible
  cookiePath: '',         

  // domain of the cookie
  cookieDomain:'',        

  // enable secure cookie - requires https connection to transfer
  cookieSecure: false,      
  
  // fade|flip|scaleUp|slideLeft     
  tabInTransition: 'fadeIn', 
  tabOutTransition: 'fadeOut',
  
  // transitions to use - normal or slide
  accordionTransition: 'slide', 

  // time for animation IN (1000 = 1s)
  accordionIntime:500,      

  // time for animation OUT (1000 = 1s)
  accordionOutTime:400,     
  
  // function to call before tab is opened
  before: function(){},     

  // function to call after tab is opened
  after: function(){}       
  
});

Changelog:

2022-03-30

• Update to v2
• Bugfix

v2.0 (2015-11-21)

• Update jQueryTab.js

v2.0 (2014-03-20)

• added version 2 with CSS3 transitions
• added keyboard navigation and tab postion switching

v1.4 (2014-01-31)

• Several bug fixes and code optimization

---

This awesome jQuery plugin is developed by dharmapoudel. For more Advanced Usages, please check the demo page or visit the official website.