Creating tabs within a page

The first script I would like to share allows you to create tabbed content within a web page.

There are many reasons why you would want to do this but the most common reason would be that you want to help your site visitors find information easily, without having to scroll down for miles.  The tabs also allows you to group information into logical parts, again making it easier for your visitors to find information quickly.

You can see the concept at work on this former project of mine:  Greenlandsmeats, (please note, vegetarians may find the content of this web site offensive!)

With a little JavaScript it is possible to create this tabbed effect.  I love the Very Simple Tabs script because it is easy to implement, light weight and degrades gracefully when JavaScript is disabled in the viewers browser.

Very Simple Tabs

Very Simple Tabs is a small, stand alone piece of JavaScript which is easily styled using CSS.  Unfortunately I have no idea who the original author of this script is (if you recognise it, please post a comment and I will acknowledge the correct author).

The JavaScript

    var tabLinks = new Array();
    var contentDivs = new Array();

    onload = function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

The CSS

ul#tabs {
 font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
 font-size: 1.2em;
 list-style-type: none;
 margin: 10px 0 0 0;
 padding: 0;
 width: 750px;
}

ul#tabs li {
 float: left;
 padding: 0;
 margin: 0 2px 0 0;
}

ul#tabs li a {
 color: #ccc;
 margin: 0px;
 padding:5px 20px;
 background-color: #990000;
 border-top: 6px #fff solid;
 display: block;
}

ul#tabs li a:hover {
 color: #fff;
 text-decoration: none;
}

ul#tabs li a.selected {
 color: #fff;
 background-color: #990000;
 border-top: 3px #990000 solid;
 border-bottom: 3px #990000 solid;
}

div.tabContent {
 width: 710px;
 clear: both;
 border: 10px #990000 solid;
 padding: 10px;
 margin: 0;
}

div.tabContent.hide {
 display: none;
}

And lastly … The HTML

<ul id="tabs">
  <li><a href="#one">Tab 1</a></li>
  <li><a href="#two">Tab 2</a></li>
  <li><a href="#three">Tab 3</a></li>
</ul>

<div id="one" class="tabContent">
  <p>Tab One</p>
</div>

<div id="two" class="tabContent">
  <p>Tab Two</p>
</div>

<div id="three" class="tabContent">
  <p>Tab 3</p>
</div>

And that’s it!