Multiple Tabs

A multi-tab jQuery plugin.

by Mark Abdallah

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h2>Tabs with a single group of sub tabs (under tab 1):</h2>
<div class="tab1">
  <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">
            <div class="tab">
              <div class="tab__header">
                <div class="tab__header-1 tab__header--active">Sub Tab Level 3 - 1</div>
                <div class="tab__header-2">Sub Tab Level 3 - 2</div>
              </div>
              <div class="tab__content">
                <div class="tab__content-1 tab__content--active">Sub Tab Content Level 3 - 1</div>
                <div class="tab__content-2">Sub Tab Content Level 3 - 2</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tab__content-2">Tab Content 2</div>
    <div class="tab__content-3">Tab Content 3</div>
  </div>
</div>

<h2>Tabs with no sub tabs:</h2>
<div class="tab2">
  <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...

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
  font-family: 'Open Sans', sans-serif;
}

h1,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

h2 {
  font-weight: 100;
}

.tab__header {
  display: block;
  clear: both;
}

.tab__header > div {
  display: inline-block;
  vertical-align: top;
  float: left;
  padding: 10px;
  background: #03A9F4;
  color: #FFF;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.75);
}

.tab__header > div:hover {
  background: #0288D1;
  cursor: pointer;
}

.tab__header > div.tab__header--active {
  background: #0288D1;
}

.tab__content {
  display: block;
  clear: both;
  background: #FFF;
  color: #212121;
  width: auto;
  max-width: 400px;
  height: inherit;
  overflow: auto;
  padding: 0 0 20px 0;
}

.tab__content > div {
  display: inline-block;
  vertical-align: top;
  float: left;
  display: none;
}

.tab__content > div.tab__content--active {
  display: block;
}


/* custom css */

.tab1,
.tab2 {
  margin: 15px 0;
}

JavaScript

(function($) {
  $.fn.multitabs = function() {
    $('.tab__header > div').on('click', function() {
      var num;
      var _this = $(this);
      var classNameTab = _this.attr('class').split(' ');
      var classNameContent = _this.parent().siblings().children();

      for (i = 0; i <= classNameTab.length; i++) {
        if (/([\d.]+)/.test(classNameTab[i])) {
          num = classNameTab[i].split('-')[1];
          _this.siblings().removeClass('tab__header--active');
          _this.addClass('tab__header--active');
        }
      }

      $(classNameContent).each(function(i, n) {
        var name = $(n).attr('class').split(' ');
        for (n = 0; n <= name.length; n++) {
          if (name[n] != undefined) {
            if (/([\d.]+)/.test(name[n])) {
              if (num === name[n].split('-')[1]) {
                var el = $(classNameContent)[num - 1];
                $(classNameContent).removeClass('tab__content--active');
                $(el).addClass('tab__content--active');
              }
            }
          }
        }
      });
    });
  }
})(jQuery);

$('.tab1').multitabs();
$('.tab2').multitabs();
$('.tab3').multitabs();