Vanilla JavaScript Plugin For Modern Tabs – tabs.js

Preview:

Description:

A minimal, modern, smoothly animated tabs plugin implemented in pure JavaScript and CSS/CSS3.

How to use it:

Import the stylesheet tabs.css in the document.

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

Create the tab list and corresponding tab panel as follows:

<section class="tabs-section">
  <div id="horizontal-tabs">
    <ul class="tabs">
      <div class="selector"></div>
      <li class="tab active-item">Tab 1</li>
      <li class="tab">2</li>
      <li class="tab"><span class="hidden-tab-name">Hidden name </span>3</li>
      <li class="tab">4 [special long name]</li>
    </ul>
    <div class="tab-content">
      <div id="item1" class="tab-item-content  active">// Some content(1)</div>
      <div id="item2" class="tab-item-content">// Some content (2)</div>
      <div id="item3" class="tab-item-content">// Third Slide</div>
      <div id="item4" class="tab-item-content">// Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus corporis deserunt expedita magni nemo numquam qui quidem quisquam rerum voluptate.</div>
    </div>
  </div>
</section>

Import the main JavaScript tabs.js. Done.

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