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 class="ft-contents">
    <div id="tab-1">
      <h4>1. Tabbed Content</h4>
    <div id="tab-2">
      <h4>2. Tabbed Content</h4>
    <div id="tab-3">
      <h4>3. Tabbed Content</h4>

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


4. Initialize the jQuery FlexTabs plugin with default settings.

  // options here

5. Set the custom media query breakpoint.

  breakpoint: 768 // default

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

  listIcon: $('<div><svg xmlns="" 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.

  transformFade: 20 // default: 0

8. Callback functions available.

  beforeInit:   function() {},
  afterInit:    function() {},
  beforeChange: function() {},
  afterChange:  function() {},
  onChangeMode: function() {}

9. API methods.

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

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

11. Advanced usage.

  beforeChange: function(sets, curItem, nextItem) {
    /* if is mobile mode (accordion) */
    if( sets.curMode == 'mobile' ) {
        display: 'block'
  afterChange: function(sets, curItem) {
    if( sets.curMode == 'desktop' ) {
    if( sets.curMode == 'mobile' && curItem.content.hasClass('active') ) {
    if( sets.curMode == 'mobile' && !curItem.content.hasClass('active') ) {

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