Tiny Nested Tabs With Vanilla JavaScript – Tabbis.js

Category: Javascript | January 26, 2017
Author: jenstornell
Views Total: 2,262
Official Page: Go to website
Last Update: January 26, 2017
License: MIT

Preview:

Tiny Nested Tabs With Vanilla JavaScript – Tabbis.js

Description:

Tabbis.js is a lightweight, pure JavaScript library for generating nice, clean, nested tabs from plain HTML structure.

How to use it:

Put the tabbis.js into the webpage.

<script src="tabbis.js"></script>

Create a normal, flat tabs component:

<div data-tabs>
  <div>Tab1</div>
  <div>Tab2</div>
  <div>Tab3</div>
</div>

<div data-panes>
  <div>Pane1</div>
  <div>Pane2</div>
  <div>Pane3</div>
</div>

If you want a complex tabs component which contains as many sub tabs.

<div data-tabs>
  <div>Tab1</div>
  <div>Tab2</div>
  <div>Tab3</div>
</div>

<div data-panes>
  <div>Pane1</div>
  <div>
    <div data-tabs>
      <div>Tab4</div>
      <div>Tab5</div>
    </div>

    <div data-panes>
      <div>Pane4</div>
      <div>
        <div data-tabs>
          <div>Tab6</div>
          <div>Tab7</div>
        </div>

        <div data-panes>
          <div>Pane6</div>
          <div>Pane7</div>
        </div>
      </div>
    </div>
  </div>
  <div>Pane3</div>
</div>

Set up the Tabbis:

var tabs = tabbis.init({
    tabGroup: '[data-tabs]',
    paneGroup: '[data-panes]',
    tabActive: 'active',
    paneActive: 'active',
    callback: function(tab, pane) {
      console.log(tab);
      console.log(pane);
    }
});

Apply your own styles to the tabs in the CSS:

[data-tabs] {
 display: flex;
 background: #eee;
 padding: 10px;
 border: 2px solid #ccc;
}

[data-tabs] >* {
 padding: 5px 20px;
 cursor: pointer;
}

[data-tabs] .active {
  background: #31a3e8;
  color: #fff;
  border-radius: 5px;
}

[data-panes] > * {
 display: none;
 border: 2px solid #ccc;
 border-top: none;
 padding: 20px;
}

[data-panes] > .active {
 display: block;
}

You Might Be Interested In:

Leave a Reply