Easy Multi-level Tabs Plugin With jQuery - multiTabs

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.

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" 
<script src="jquery-multitabs.js"></script>

2. Create the tabs and tabbed content as these. Don't forget to specify the parent and child tabs using the data-child attribute.

<div class="tab-demo">
  <div data-child="false" 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 class="tab__content">
    <div class="tab__content-1 tab__content--active">
      <div class="tab">
        <div data-child="true" 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 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 class="tab__content-2">Tab Content 2</div>
    <div class="tab__content-3">Tab Content 3</div>

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


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

  • Publication date: 19.12.2017
  • Source