Organize Your Content With Tabs - jQuery SI Tabs

File Size: 5.35 KB
Views Total: 1581
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Organize Your Content With Tabs - jQuery SI Tabs

 SI Tabs is a progressive enhancement, easy-to-customizable jQuery tab switcher plugin that organizes your content into several tabs where users can show/hide tabbed content in a quick way.

How to use it:

1. Create the HTML for the tabbed contents. Note that each section must have a unique ID.

<section class="tabbed tabbed_default" id="section1">
  Tabbed Content 1

<section class="tabbed" id="section2">
  Tabbed Content 2

<section class="tabbed" id="section3">
  Tabbed Content 3

... more tabbed content here ...

2. Create a list of links pointing to these sections.

  <li><a class="tab" href="#section1">Tab 1</a></li>
  <li><a class="tab" href="#section2">Tab 2</a></li>
  <li><a class="tab" href="#section3">Tab 3</a></li>
  ... more links here ...

3. Load jQuery JavaScript library and the si-tabs.js script at the bottom of the page.

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

4. Initialize the SI Tabs plugin on document ready.

new SiTabs();

5. Apply CSS styles to the tab switcher.

.tab {
  /* tab link */

.tab_active {
  /* active tab link */

.tab_disabled {
  /* disabled tab lin */

.tabbed {
  /* tabbed content */

.tabbed_default {
  /* initial tabbed content */

.tab_active {
  /* initial tabbed content */

6. Override the default CSS classes.

new SiTabs({
    tabClass: 'tab',
    tabbedClass: 'tabbed',
    defaultTabClass: 'tabbed_default',
    activeTabClass: 'tab_active',
    disabledTabClass: 'tab_disabled'

7. Apply a slide transition to the tabbed content.

new SiTabs({
    transition: 'slide'

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