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> 

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

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

... more tabbed content here ...

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

<ul>
  <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 ...
</ul>

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.