Show And Hide Tabbed Content With jQuery SimpleTab Plugin

File Size: 218 KB
Views Total: 3523
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Show And Hide Tabbed Content With jQuery SimpleTab Plugin

A simple, lightweight (~2.5kb minified), nice-looking jQuery tabs plugin used to show and hide tabbed content within the document.

The plugin dynamically generates a tab navigation from an unordered list that links to DIV based tabbed content on the webpage.

Your users are able to switch between tabbed content by clicking the tabs, with fade in/out animations.

See also:

How to use it:

1. To get started, you need to load jQuery library and the SimpleTab plugin's files in the html file.

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

2. Create the tabbed content on the page. Note that each content must have a unique ID.

<div class="tabContent" id="content1">
  Tab 1 Content
</div>

<div class="tabContent" id="content2">
  Tab 2 Content
</div>

<div class="tabContent" id="content3">
  Tab 3 Content
</div>

...

3. Create an unordered HTML list containing anchor links that point to the corresponding tabbed content.

<ul class="tab tab-example" data-tab-name="tab-example">
  <li><a href="#content1">TAB 1</a></li>
  <li><a href="#content2">TAB 2</a></li>
  <li><a href="#content3">TAB 3</a></li>
  ...
</ul>

4. The tab navigation also support external links:

<ul class="tab tab-example" data-tab-name="tab-example">
  <li><a href="#content1">TAB 1</a></li>
  <li><a href="#content2">TAB 2</a></li>
  <li><a href="#content3">TAB 3</a></li>
  <li><a href="https://www.jqueryscript.net" target="_blank">jQueryScript ↗︎</a></li>
</ul>

5. Initialize the plugin and enable the default theme. That's it.

$(function(){
  $(".tab").simpleTab({
    defaultSkin: true
  });
});

6. Create a custom skin using your own CSS styles.

$(function(){
  $(".tab").simpleTab({
    defaultSkin: false
  });
});
.tab {
  /* your css */
}

.tab li {
  /* your css */
}

.tab li > a {
  /* your css */
}

.tab li > a.link {
  /* your css */
}

.tab li.on > a {
  /* your css */
}

.tab li.disable > a {
  /* your css */
}

7. Config the fade in/out animation.

$(function(){
  $(".tab").simpleTab({
    fadeEffect: true,
    fadeSpeed: 400
  });
});

8. Set the initial tab index on init.

$(function(){
  $(".tab").simpleTab({
    startIndex: 0 // 0 = tab 1
  });
});

9. Disable tabs.

$(function(){
  $(".tab").simpleTab({
    dimmedIndexs: '1, 2' // disable tab 2 and tab 3
  });
});

10. The default active/disabled CSS classes.

$(function(){
  $(".tab").simpleTab({
    onTabClass: 'selected',
    dimmedTabClass: 'dimmed'
  });
});

11. Perform an action on each tab change.

$(function(){
  $(".tab").simpleTab({
    afterChange: function($content, prevIdx, currentIdx){
      if(currentIdx == 2) alert("Welcome =) ID of this content is '" + $content.attr("id") + "'.");
      else alert("Tab is toggled.");
    }
  });
});

Changelog:

2019-09-03


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