Dynamic Responsive Tabs Plugin jQuery - tabSwitcher.js

tabSwitcher.js is a dynamic, responsive tabs plugin which automatically switches between tabs and dropdown select depending on the current screen size (by default screen size <769px is considered as mobile).

How to use it:

1. Load jQuery library, tabSwitcher.css, and tabSwitcher.js in the HTML file.

<link href="/path/to/tabSwitcher.css" rel="stylesheet" />
<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/tabSwitcher.js"></script>

2. Create the tabs container.

<div id="superHeroTabs"></div>

<div id="Batman_TabContent" class="tabContainerClass"></div>
<div id="Luke_TabContent" class="tabContainerClass"></div>
<div id="Hobbit_TabContent" class="tabContainerClass"></div>
<div id="Spock_TabContent" class="tabContainerClass"></div>
<div id="Hulk_TabContent" class="tabContainerClass"></div>
<div id="JackSparrow_TabContent" class="tabContainerClass"></div>

3. The example JS to create a tabs component.

var tabSwitcher = {

    // creates Super hero tabs
    createSuperHeroTabs: function () {
      var oSuperHeroTabConfig = new tabConfiguration();
      oSuperHeroTabConfig.tabName = ["Batman", "Luke", "Hobbit", "Spock", "Hulk", "Jack Sparrow"];
      oSuperHeroTabConfig.commonClass = "superHeroTabCollection";
      oSuperHeroTabConfig.tabID = ["Batman_Tab", "Luke_Tab", "Hobbit_Tab", "Spock_Tab", "Hulk_Tab", "JackSparrow_Tab"];
      oSuperHeroTabConfig.tabClickRequestFunction = tabSwitcher.displaySuperHeroSelectedTab;
      oSuperHeroTabConfig.customID = "superHeroTabs";
      oSuperHeroTabConfig.defaultTab = "Batman"
      createTabs(oSuperHeroTabConfig);
    },

    // method to switch Super hero tab sections
    // @parameter: sSelectedTab - tab ID that is selected
    displaySuperHeroSelectedTab: function (sSelectedTab) {
      $(".tabContainerClass").show().not("#" + sSelectedTab + "Content").hide();
      if ($("#" + sSelectedTab + "Content").is(":empty")) {
        $("#" + sSelectedTab + "Content").
          append("<img class='tabContentImg' src='" + constants.imageReferenceURL + sSelectedTab.split("_Tab")[0] + ".PNG' />");
      }
    }
}

$(document).ready(function () {
  tabSwitcher.createSuperHeroTabs();
});

4. All default configurations.

• tabName: define all tab names in an array
• commonClass: define a common class to be applied to all tabs
• tabID: define ids of the tabs
• tabClickRequestFunction: define click callback function for all tabs
• customID: state main tab container that is defined in the HTML
• defaultTab: define the tab that needs to be default

---

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