JavaScript Tabs without jQuery

Tabs (also called Pills) is the collection of content provided into multiple boxes along with navigation so that user can switch between them. Only one tab (box) content is visible at a time.

jQuery provides a lot of plugins to create tabs. You can also create simple tabs using JavaScript code only.

Simple JavaScript tabs without using jquery

<html>

<head>
  <script type="text/javascript">
    function showtab(tabs) {
      var tab = tabs;
      switch (tab) //this switch case replaces the tabContent
      {
        case "tab-1":
          document.getElementById('tab-container').innerHTML = document.getElementById("tab-1").innerHTML;
          break;
        case "tab-2":
          document.getElementById('tab-container').innerHTML = document.getElementById("tab-2").innerHTML;
          break;
        case "tab-3":
          document.getElementById('tab-container').innerHTML = document.getElementById("tab-3").innerHTML;
          break;
        default:
          document.getElementById('tab-container').innerHTML = document.getElementById("tab-1").innerHTML;
          break;
      }
    }
  </script>
</head>

<body>
  <!-- Home page tabs using javascript -->
  <p>&nbsp;</p>
  <table border="0" cellpadding="1" cellspacing="1">
    <tbody>
      <tr>
        <td><a href="javascript:showtab('tab-1')"> FIRST </a> |</td>
        <td><a href="javascript:showtab('tab-2')"> SECOND </a> |</td>
        <td><a href="javascript:showtab('tab-3')"> THIRD </a> |</td>
      </tr>
    </tbody>
  </table>
  <p id="tab-container"> Click on the tabs </p>
  <p id="tab-1" style="visibility:hidden"> Dummy Content from First Tab </p>
  <p id="tab-2" style="visibility:hidden"> Find content from Second tab </p>
  <p id="tab-3" style="visibility:hidden"> Content from Third Tab will be placed here </p>
  <!-- /Home page tabs using javascript -->
</body>
<html>

Run Live Example:

http://codepen.io/codelab/pen/EVJEwJ


Learn more about the similar topics:
Tutorials
No Content Found.
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.