Easy Multi-level Tabs Plugin With jQuery - multiTabs

multiTabs is a lightweight jQuery plugin that makes it possible to create unlimited multi-level tabs interfaces from nested HTML elements.

How to use it:

1. Insert the jQuery multiTabs plugin's JavaScript and CSS files into the html document.

<link href="jquery-multitabs.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery-multitabs.js"></script>

2. Create the tabs and tabbed content as these. 

<div class="tab-demo">
  <div class="tab__header">
    <div class="tab__header-1 tab__header--active">Tab 1</div>
    <div class="tab__header-2">Tab 2</div>
    <div class="tab__header-3">Tab 3</div>
  </div>
  <div class="tab__content">
    <div class="tab__content-1 tab__content--active">
      <div class="tab">
        <div class="tab__header">
          <div class="tab__header-1 tab__header--active">Sub Tab 1</div>
          <div class="tab__header-2">Sub Tab 2</div>
          <div class="tab__header-3">Sub Tab 3</div>
          <div class="tab__header-4">Sub Tab 4</div>
        </div>
        <div class="tab__content">
          <div class="tab__content-1 tab__content--active">Sub Tab Content 1</div>
          <div class="tab__content-2">Sub Tab Content 2</div>
          <div class="tab__content-3">Sub Tab Content 3</div>
          <div class="tab__content-4">Sub Tab Content 4</div>
        </div>
      </div>
    </div>
    <div class="tab__content-2">Tab Content 2</div>
    <div class="tab__content-3">Tab Content 3</div>
  </div>
</div>

3. Call the function to initialize the multi-level tabs interface.

$('.tab-demo').multitabs();

Change log:

2017-12-21

• remove data-child added unlimited nesting of tabs

---

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