Lightweight Tabs Widget with Pure JavaScript – puretabs

Preview:

Description:

puretabs is a super lightweight JavaScript library to create a tabs widget on your webpage with minimal effort.

How to use it:

The html structure for the tabs navigation & sections.

<div class="tabs">
  <nav class="tabs__navigation">
    <a class="tabs__link tabs__link--active" href="#first">Tab One</a>
    <a class="tabs__link" href="#second">Tab Two</a>
    <a class="tabs__link" href="#third">Tab Three</a>
    <a class="tabs__link" href="#fourth">Tab Four</a>
  </nav>
  <p class="tabs__section" id="first">Section One</p>
  <p class="tabs__section" id="second">Section Two</p>
  <p class="tabs__section" id="third">Section Three</p>
  <p class="tabs__section" id="fourth">Section Four</p>
  
</div>

Load the puretabs.js script in the document.

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

Initialize the tabs widget.

pureTabs.init('tabs__link', 'tabs__link--active');

Style the tabs widget whatever you wish.

.tabs {
  border: 1px solid #ddd;
  position: relative;
  margin-top: 5rem;
  margin-bottom: 3rem;
}
.tabs__section { margin: 1rem; }
.tabs__navigation {
  margin-left: -1px;
  position: absolute;
  top: -34px;
}
.tabs__link {
  display: inline-block;
  border: 1px solid #ddd;
  text-decoration: none;
  padding: .25rem .75rem;
  color: #B3B3B3;
  background: #E7E7E7;
  margin-left: .25rem;
}
.tabs__link:first-child { margin-left: 0; }
.tabs__link--active {
  font-weight: bold;
  border-bottom-color: #fff;
  background: #fff;
  color: #186baa;
}