some nice looking tabs

In this post, we will make some simple and nice looking tabs. Here's the final product: nice, functional and simple tabs.

Tab1
Tab2
Tab3
Tab4

some content from Tab 1

some more content

blah blah blah

some other content from Tab 2

some more content

blah blah blah

some content here from Tab 3

some more content

blah blah blah

some content from Tab 4

some more content

blah blah blah

In order to do that, we will be using jQuery (of course, this can be done in pure JavaScript but it's easier with jQuery), so be sure to add the following line inside your html head tag.


				<!DOCTYPE html>
<html lang="en">
<head>
 ...
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

 ...
</head>

Let's start with the html. it's very simple: it mainly consists of a unordered list to make the tab bar and a few div tags with the content of each tab.


				<body>
   <div class="tabs">
      <ul class="tabs">
         <li class="nonactivetab" id="Tab_1"> Tab1 </li>
         <li class="nonactivetab" id="Tab_2"> Tab2 </li>
         <li class="activetab" id="Tab_3"> Tab3 </li>
         <li class="nonactivetab" id="Tab_4"> Tab4 </li>
      </ul>
      <div class="tabcontent" id="content_1">
         some content from Tab 1 <br/> <br/> some more content <br/> <br/> blah blah blah
      </div>
      <div class="tabcontent" id="content_2">
         some other content from Tab 2 <br/> <br/> some more content <br/> <br/> blah blah blah
      </div>
      <div class="tabcontent" id="content_3">
         some content here from Tab 3 <br/> <br/> some more content <br/> <br/> blah blah blah
      </div>
      <div class="tabcontent" id="content_4">
         some content from Tab 4 <br/> <br/> some more content <br/> <br/> blah blah blah
      </div>
   </div>	
</body>

Note the classes and id we have used for the tabs. These will be the key to the script. See how we used the "nonactivetab" class for non-active tabs and the "activetab" class for the active tab. Also note how the ids are incremented; the id of the corresponding div tag contains the same number.

Now let's add some style (in the HTML head tag):


				<style type="text/css">
   div.tabs, div.tabcontent, div.tabs ul, div.tabs ul li
   {
      font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
      font-size: 1.0625em;/* 17/16px */
      font-weight: 200;
      text-align: center;
      text-decoration: none;
      letter-spacing: 0.0625em;/* 1/16px */		
	}
	
   div.tabs
   {
      text-align:center;
      width: 50%;
      margin: 1em auto;
      padding:0;
	}
   
   ul.tabs
   {
      width:100%;
      margin:0;
      list-style-type:none;
      padding:0;
      overflow:hidden;
   }
   
   li.nonactivetab, li.activetab
   {
      display:inline;
      margin:0 0.4%;
      height: 1.5em;
      line-height: 1.5em;			
      font-size:1em;
      width:15%;
      float:left;
      background-color:#bbb;
      padding:0.5em 0;
      border-top-left-radius:5px;
      border-top-right-radius:5px;
      position:relative;
      z-index:2;
      border:0.0625em solid #888;
      cursor:pointer;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: moz-none;
      -ms-user-select: none;
      user-select: none;			
   }
   
   li.activetab
   {
      background-color:#ddd;
      z-index:4;
      border:0.0625em solid #888;
      border-bottom:0.0625em solid #ddd;
      cursor:default;
   }		
   
   div.tabcontent
   {
      background-color:#ddd;
      border: 0.0625em solid #888;
      padding:1em;
      position:relative;
      z-index:3;
      display:none;
      margin-top:-0.0625em;
   }
   
	</style>

A few important things:

display:inline for the "nonactivetab" and "activetab" list items;
the bottom border changes color from active to non-active; that and the negative "margin-top" for the content divs allow the active tab to look like it is part of the content (since the border-color is the same as the background-color of the content div). The non active tabs have a darker background and border color;
also important for this to work properly are the "z-index" properties to have the tabs above the content;
to give the illusions of the tabs being buttons, we change the cursor for the non-active tabs and we make the tabs unselectable with the "user-select" properties;
finally, all content divs are initially hidden. We will only show the active one (using JavaScript).

So, we built the tabs but right now, they are not doing much. We will need to add a little JavaScript for the tabs to be functional.


				<script>
   $(document).ready(function(){
      
      function showActive()
      {
         var activeId = $(".activetab").attr("id");
         var splitid = activeId.split("_");
         var contentid = "content_"+splitid[1];
         $(".tabcontent").hide();
         $("#"+contentid).show();
      }
      
      $("ul.tabs li").click(function(){
         $("ul.tabs li").removeClass("activetab");
         $("ul.tabs li").addClass("nonactivetab");
         $(this).addClass("activetab");
         showActive();
      });
      
      showActive();
   });

</script>

So, what's happening here? When the user will click one of the tabs, they will call their respective click() function, which will do a few things: make all tabs have the "nonactivetab" class (using the removeClass() and addClass() functions), give the clicked tab the "activetab" class, and then call the showActive() function.

The showActive() function will find the id of the active tab, get the index that we wrote at the end of the id, hide all tab contents and show the content having the same index than the clicked tab.

And here you go ... that's as simple as that.

Enjoy and let us know if that works for you.