Home » Codes » JavaScript » JavaScript Top Codes

JavaScript Top Codes

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