Simple JavaScript ES 6 Compatible Tabs System

Preview:

Description:

A simple, AJAX-enabled, AMD-compatible tabs component made for both ECMAScript 6 and 5.

How to use it:

Include the tabs.js (or tabs.es5.js) on your webpage.

<script src="/path/to/tabs.es5.js"></script>

Create navigation and content for the tabs.

<div class="tabs">
  <div class="tabs__toggle tabs__toggle_active">tab 1</div>
  <div class="tabs__toggle">tab 2</div>
  <div class="tabs__tab">tab 1 content</div>
  <div class="tabs__tab">tab 2 content</div>
</div>

Initialize the tabs system.

var initTabs = module.exports['default'];
initTabs('.tabs');

Load external data sources using Html5 data attribute.

<div class="tabs">
  <div class="tabs__toggle tabs__toggle_active">tab 1</div>
  <div class="tabs__toggle">tab 2</div>
  <div class="tabs__tab">tab 1 content</div>
  <div class="tabs__tab" data-src="1.html">tab 2 content</div>
</div>

Style the tabs system whatever you like.

.tabs__toggle {
  display: inline-block;
  cursor: pointer;
  color: #ccc;
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #000;
}

.tabs__toggle_active {
  cursor: default;
  color: #fff;
  border: 1px solid #FC6D58;
}

.tabs__tab { padding-top: 10px; }

.tabs {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 20px auto;
  max-width: 400px;
}