Minimal Clean Tabs Component With Vanilla JavaScript – tabs.js

tabs.js is a minimal, clean, high performance tabs component built using JavaScript and SCSS with no dependencies.

How to use it:

Place the CSS file tabs.css into the header of your html page.

<link href="tabs.css" rel="stylesheet">

Create the tabs component from plain, semantic html markups.

<div class="tabs">
  <div class="tab">
    <a class="tab-button" href="#">Item 1</a>
    <div class="tab-content">
      <p>Content 1</p>
    </div>
  </div>
  <div class="tab">
    <a class="tab-button" href="#">Item 1</a>
    <div class="tab-content">
      <p>Content 2</p>
    </div>
  </div>
  <div class="tab">
    <a class="tab-button" href="#">Item 1</a>
    <div class="tab-content">
      <p>Content 3</p>
    </div>
  </div>
  <div class="tab">
    <a class="tab-button" href="#">Item 1</a>
    <div class="tab-content">
      <p>Content 4</p>
    </div>
  </div>
</div>

Place the JavaScript file tabs.js just before we close the body tag. That’s it.