Minimal Handy jQuery Tabs Plugin - AddTabs

AddTabs is a dead simple-to-use jQuery plugin used to create a Material Design style tabs interface from plain HTML.

How to use it:

1. Load jQuery library and other required resources in your html page.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="res/Obj.js"></script>

2. Add tabs and tab panels to a container with the data-addui='tabs' attribute as this:

<div data-addui='tabs'>
  <div role='tabs'>
    <div>Tab 1</div>
    <div>Tab 2</div>
    <div>Tab 3</div>
  </div>
  <div role='contents'>
    <div>
      <p>Tab 1 Content</p>
    </div>
    <div>
      <p>Tab 2 Content</p>
    </div>
    <div>
      <p>Tab 3 Content</p>
    </div>
  </div>
</div>

3. Style the tabs interface and make it responsive using CSS flexbox model.

.addui-Tabs .addui-Tabs-tabHolder { display: flex; }

.addui-Tabs .addui-Tabs-tabHolder .addui-Tabs-tab {
  flex: 1;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  text-align: center;
  padding: 8px 16px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.87);
}

.addui-Tabs .addui-Tabs-tabHolder .addui-Tabs-tab.addui-Tabs-active {
  padding-bottom: 5px;
  border-bottom: 4px solid #3f51b5;
}

.addui-Tabs .addui-Tabs-content { display: none; }

.addui-Tabs .addui-Tabs-content.addui-Tabs-active { display: block; }

---

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