STEP 1) THE HTML

  
    

      

        Whatever modified handbook dictates a chase. The unusable ghost warps the hypothetical product. 
        The connector concerns the imprisoned stamp. The chemical talks next to the raid.
      
      

        The egg fumes? The servant prefaces the fan next to the hundred cabinet. A leather spins. 
        Above his racing chalk reverts the civilian glory. Does an Adjacent Number Ray the guideline?
      
      

        A hand trips. Why does the friend dance? A player copes under a tough!
        The squashed railroad intervenes in the criterion. When can a lake hesitate?
      
    
  

This should be pretty easy to understand. There are 2 parts to the HTML:

• First, you need to create the tabs navigation menu.
• Then, create the corresponding text blocks for each tab.

STEP 2) THE CSS

/* [NAVIGATION] */
#tab-nav {
  background: #333;
}
#tab-nav span.tabnav {
  display: inline-block;
  padding: 20px 10px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
#tab-nav span.active {
  background: #a03b31;
}

/* [CONTENTS] */
#tab-contents {
  padding: 15px;
}
#tab-contents div.tabtxt {
  display: none;
}
#tab-contents div.active {
  display: block;
}

/* [DOES NOT MATTER] */
html, body {
  padding: 0;
  margin: 0;
  font-family: arial;
}

Well, just some CSS cosmetics for the HTML to make it look pretty. The only functional part here is probably hiding the contents with div.tabtxt and showing it with div.active.

STEP 3) THE JAVASCRIPT

THE SCRIPT

var tab = {
  nav : null, // holds all tabs
  txt : null, // holds all text containers
  init : function () {
  // tab.init() : init tab interface

    // Get all tabs + contents
    tab.nav = document.getElementById("tab-nav").getElementsByClassName("tabnav");
    tab.txt = document.getElementById("tab-contents").getElementsByClassName("tabtxt");

    // Error checking
    if (tab.nav.length==0 || tab.txt.length==0 || tab.nav.length!=tab.txt.length) {
      console.log("ERROR STARTING TABS");
    } else {
      // Attach onclick events to navigation tabs
      for (var i=0; i

THE OVERVIEW

HOW IT WORKS

Not going to bore you with a line-by-line explanation (trace through the code on your own if you are interested), but here is the gist of it:

• The var tab object contains all the key players that deal with the tab navigation.
• When the window is fully loaded, tab.init will fire up. It gathers all the necessary HTML references, attaches click listeners to the tabs, and show the first one by default.
• When the user clicks on a tab, tab.switch will fire up. It basically plays with the CSS styles to toggle which tab and content block to show.
• That’s it! That simple.

STEP 1) THE HTML

Whatever modified handbook dictates a chase. The unusable ghost warps the hypothetical product. 
The connector concerns the imprisoned stamp. The chemical talks next to the raid.

The egg fumes? The servant prefaces the fan next to the hundred cabinet. A leather spins. 
Above his racing chalk reverts the civilian glory. Does an adjacent number ray the guideline?

A hand trips. Why does the friend dance? A player copes under a tough!
The squashed railroad intervenes in the criterion. When can a lake hesitate?

Not much of a difference in this version actually, just that we have separated the text blocks out into their own HTML files. Also, take note that we use  in the navigation now, with href to specify which HTML file to load.

STEP 2) THE CSS

/* [NAVIGATION] */
#tab-nav {
  background: #333;
}
#tab-nav a.tabnav {
  display: inline-block;
  padding: 20px 10px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
#tab-nav a.active {
  background: #a03b31;
}

/* [CONTENTS] */
#tab-contents {
  padding: 15px;
}

/* [DOES NOT MATTER] */
html, body {
  padding: 0;
  margin: 0;
  font-family: arial;
}

Yep, just some cosmetics again. Feel free to change these to fit your own theme.

STEP 3) THE JAVASCRIPT

THE SCRIPT

var tab = {
  nav : null, // holds all tabs
  txt : null, // holds the text container
  init : function () {
  // tab.init() : init tab interface

    // Get all tabs
    tab.nav = document.getElementById("tab-nav").getElementsByClassName("tabnav");
    tab.txt = document.getElementById("tab-contents");

    // Error checking
    if (tab.nav.length==0) {
      console.log("ERROR STARTING TABS");
    } else {
      // Attach onclick events to navigation tabs
      for (var i=0; i

THE OVERVIEW

HOW IT WORKS

The basics behind this AJAX version is pretty much the same… except that instead of showing/hiding text blocks, it loads them directly from HTML files with AJAX instead.

DEMO

EXTRA – CSS ACCORDION

Looking for more ways to organize your contents? Check out my other guide:

3 Steps Simple Responsive Accordion (Pure CSS Only)

SOURCE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
 

The post 3 Steps Simple Javascript Tabs appeared first on Code Boxx.