Adaptive Themeable Tabs Plugin - jQuery FlexTabs

Adaptive Themeable Tabs Plugin - jQuery FlexTabs

A flexible, responsive, adaptive, customizable, themeable jQuery tabs plugin created for both desktop and mobile.

The plugin automatically transforms the normal tabs interface into a vertical accordion UI when the screen is smaller than a specific value.

You can set the switch animation separately for mobile and desktop.

1. Include the core stylesheet and default theme CSS in the head section of the document.

<link rel="stylesheet" href="css/jquery.flextabs.css">
<link rel="stylesheet" href="css/jquery.flextabs.theme-default.css">

2. Create tabs and tab content following the HTML structure as follows:

<div class="example theme-default">
  <div class="ft-nav">
    <a href="#tab-1" class="ft-tab">Tab #1</a>
    <a href="#tab-2" class="ft-tab active">Tab #2</a>
    <a href="#tab-3" class="ft-tab">Tab #3</a>
  </div>
  <div class="ft-contents">
    <div id="tab-1">
      <h4>1. Tabbed Content</h4>
    </div>
    <div id="tab-2">
      <h4>2. Tabbed Content</h4>
    </div>
    <div id="tab-3">
      <h4>3. Tabbed Content</h4>
    </div>
  </div>
</div>

3. Display the tabbed content for users that have disabled scripts in their browser.

<noscript>
  <style>.ft-contents>*{display:block!important;}</style>
</noscript>

4. Initialize the jQuery FlexTabs plugin with default settings.

$('.example').flexTabs({
  // options here
});

5. Set the custom media query breakpoint.

$('.example').flexTabs({
  breakpoint: 768 // default
});

6. Customize the accordion icon when running on the mobile.

$('.example').flexTabs({
  listIcon: $('<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M48.293 23.293l-16.293 16.293-16.293-16.293-1.414 1.561 17 17.146h1.414l17-17.146z"/></svg></div>')
});

7. Customize the animation speed.

$('.example').flexTabs({
  transformFade: 20 // default: 0
});

8. Callback functions available.

$('.example').flexTabs({
  beforeInit:   function() {},
  afterInit:    function() {},
  beforeChange: function() {},
  afterChange:  function() {},
  onChangeMode: function() {}
});

9. API methods.

// re-init the plugin
$('.example').flexTabs('reinit');
// re-init the plugin with new options
$('.example').flexTabs('reinit', newOptions);
// destroy the plugin
$('.example').flexTabs('destroy');
// goto a specific tab
$('.example').flexTabs('go', tab);
// close all tabbed content
$('.example').flexTabs('closeAll');

10. You're also allowed to pass the options via data attribute. Ideal for multiple instances on your page.

<div class="example" data-flextabs="{
     optionName: Value
     }">
     ...
</div>

11. Advanced usage.

$('.example').flexTabs({
  beforeChange: function(sets, curItem, nextItem) {
    /* if is mobile mode (accordion) */
    if( sets.curMode == 'mobile' ) {
      nextItem.content.css({
        display: 'block'
      });
    }   
  },
  afterChange: function(sets, curItem) {
  
    if( sets.curMode == 'desktop' ) {
      curItem.content.hide().fadeIn(250);
    }
    
    if( sets.curMode == 'mobile' && curItem.content.hasClass('active') ) {
      curItem.content.hide().slideDown(350);
    }
    
    if( sets.curMode == 'mobile' && !curItem.content.hasClass('active') ) {
      curItem.content.slideUp(350); 
    }
    
  }
});

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

  • Publication date: 09.10.2018
  • Source