Minimalist ES6 Tabs Component – tabsjs

tabsjs is a minimalist tabs component written in ES6. This component enables the user to switch between tabbed content by clicking on the tabs.

How to use it:

Create the tabs following the html as these:

<div data-tabs>
  <div class="bar">
    <div data-tabs-item="1" data-tabs-active>1</div>
    <div data-tabs-item="2">2</div>
    <div data-tabs-item="3">3</div>
  </div>
  <div class="content">
    <div data-tabs-content="1" data-tabs-active>Tab 1</div>
    <div data-tabs-content="2">Tab 2</div>
    <div data-tabs-content="3">Tab 3</div>
  </div>
</div>

Place the main JavaScript file ‘tabs.js’ at the bottom of the webpage.

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

The required CSS rules.

[data-tabs] [data-tabs-content] {
  display: none;
}
[data-tabs] [data-tabs-content][data-tabs-active] {
  display: block;
}

Initialize the tabs component and done.

Tabs.init()

Apply your own CSS styles to the tabs.

[data-tabs] {
  /* your css here */
}
[data-tabs] .bar {
  /* your css here */
}
[data-tabs] [data-tabs-item] {
  /* your css here */
}
[data-tabs] [data-tabs-content] {
  /* your css here */
}
[data-tabs] [data-tabs-item][data-tabs-active] {
  /* your css here */
}
[data-tabs] [data-tabs-item]:last-child {
  /* your css here */
}

Changelog:

08/25/2018

• Adding comments and constants