Pure Javascript Tabs without any Library

| Page Views: 74

Pure Javascript Tabs Implementation Tutorial

Let's see how we can create our own tabs using Javascript,HTML and CSS only. No third party libraries.

Let's go.

Video Tutorial

You can view the video tutorial below:

(a). mytabs.css
/* @import allows us import a stylesheet from a url */
@import url('https://fonts.googleapis.com/css?family=Ubuntu');

*{
  margin: 0;
  padding: 0;
}
body{
  font-family: 'Ubuntu', sans-serif;
  background: #00796B;
  padding-top: 40px;
}
#horizontal-tabs{
  max-width: 600px;
  display: block;
  margin: 0 auto;
}
.tabs{
  /* display  determines the type of box or boxes that are generated for an element. */
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  list-style: none;
  background-color: #FF5733;
  color: #fff;
  font-weight: 400;
  border-radius: 3px;
  width: content-box;
  position: relative;

}
.tab{
  display: block;
  padding: 11px 20px;
  position: relative;
  /* 'z-index' property specifies the stack level of the box in the current stacking context  */
  z-index: 99999;

}
.tab:hover{
  /* cursor allows control over cursor appearance in an element */
  cursor: pointer;
}

.selector{
  display:inline-block;
  position: absolute;
  left:0;
  top:0;
  height: 40px;
  z-index:99999;
  border-radius:7px;
  transition: all 500ms cubic-bezier(0.080, -0.195, 0.140, 0.970);
  background: #FF9800;
}

.selector:after{
  content:'';
  position: absolute;
  z-index: -1;
  left: calc(50% - 10px);
  bottom: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #FF9800 transparent transparent transparent;
}
.tab-content .tab-item-content{
  background: #ffffff;
  border-radius: 3px;
  box-sizing: border-box;
  display: none;
}

.tab-content .tab-item-content.active{
  padding: 20px;
  height: 300px;
  display: block;
}

li.tab .hidden-tab-name{
  font-size: 0;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
li.tab.active-item .hidden-tab-name{
  display: inline;
  visibility: visible;
  opacity: 1; /*where 1 is opaque and 0 is entirely transparent. */
  font-size: inherit;
}
(b). mytabs.js
'use strict';

/**
 * Let's Reference the DOM elements
 */
let tab = document.getElementsByClassName('tab'),
        tabContent = document.getElementsByClassName('tab-item-content'),
        selector = document.querySelector('.selector'),
        tabs = document.querySelector('.tabs');

/**
 *
 * Let's create a function that can by default hide an inactive tab's title.
 */
function hideTabsContent(a) {
        for (let i = a; i < tabContent.length; i++) {
            tabContent[i].classList.remove('active');
            tab[i].classList.remove('active-item');
        }
    }

selector.style.width = (tab[0].offsetWidth + 'px');

/**
 * Let's listen to click events of our tabs
 */
tabs.addEventListener('click', function () {
    let target = event.target;
    if (target.className === 'tab') {
        for (let i = 0; i < tab.length; i++) {
            if (target === tab[i]) {
                showTabsContent(i);
                selector.style.left = (target.offsetLeft + 'px');
                selector.style.width = (target.offsetWidth + 'px');
                break;
            }
        }
    }
});

function showTabsContent(b) {
    hideTabsContent(0);
    tab[b].classList.add('active-item');
    tabContent[b].classList.add('active');
}
(c)index.html
<!doctype html>
<html lang="en">

<head>
  <title>JS CSS Tabs</title>
  <link rel="stylesheet" href="mytabs.css">
</head>

<body>

  <section class="tabs-section">
    <div id="horizontal-tabs">
      <ul class="tabs">
        <div class="selector"></div>
        <li class="tab active-item">Meteors</li>
        <li class="tab">Moons</li>
        <li class="tab">Stars </li>
        <li class="tab">Galaxies</li>
      </ul>
      <div class="tab-content">
        <div id="item1" class="tab-item-content  active">
          <p>Here are some of the largest meteors:</p>
          <br>
          <ol>
            <li>Tunguska </li>
            <li>Crab Pulsar </li>
            <li>Geminga </li>
            <li>Calvera </li>
            <li>Vela X-1 </li>
            <li>Gaspra </li>
            <li>Psyche </li>
          </ol>
        </div>
        <div id="item2" class="tab-item-content">
          <p>Here are some of the moons we know of:</p>
          <br>
          <ol>
            <li>Ganymede </li>
            <li>Callisto </li>
            <li>IO </li>
            <li>Oberon </li>
            <li>Ariel </li>
            <li>Umbriel </li>
            <li>Europa </li>
          </ol>
        </div>
        <div id="item3" class="tab-item-content">
          <p>Here are some of the largest stars we know of:</p>
          <br>
          <ol>
            <li>UY Scuti </li>
            <li>VV Cephei </li>
            <li>VY Canis Majoris </li>
            <li>KY Cygni </li>
            <li>Betelgeuse </li>
            <li>Eta Carinae </li>
            <li>Antares </li>
            <li>Rigel </li>
            <li>Deneb </li>
          </ol>
        </div>
        <div id="item4" class="tab-item-content">
          <p>Here are some of the galaxies we know of:</p>
          <br>
          <ol>
            <li>IC 1101 </li>
            <li>Messier 87 </li>
            <li>Pinwheel </li>
            <li>Sombrero </li>
            <li>Tadpole </li>
            <li>Andromeda </li>
            <li>Black Eye </li>
            <li>Star Bust </li>
          </ol>
        </div>
      </div>
    </div>
  </section>
  <script src="mytabs.js"></script>
</body>

</html>
Codepen Demo

See the Pen Pure Javascript Nice Tabs by Oclemy (@Oclemy) on CodePen.

Download
Download

You can download the full source code below or watch the video from the link provided.

No. Location Link
1. Codepen Download
2. YouTube Video Tutorial
3. YouTube ProgrammingWizards TV Channel

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section.

About Me.

After completing his Software Engineering bachelors program, Oclemy(Clement Ochieng) these days is a man of two lives. At day he works for a startup in Nairobi, Kenya. At night he works tirelessly on building ProgrammingWizards TV, a tv channel for student coders and this website to help share the source code. In between he practices Meditation and Self actualization to help him keep balance. He also likes going for long solo walks to connect more with nature.




Recommendations


What do You Think


Previous Post Next Post