CodingForums.com - Trouble with tabs

I am trying to build a webpage with tabs but I am having problems with the tabs themselves. As I add more tabs for some reason all the tabs show at the same time when I click one tab. Is there anyway to hide the contents of one tab while the other is being viewed. Please help. The code is below:
Code:


<html>

    <head>

        <title>Apricot Consulting Group</title>

    <link type="text/css" rel="stylesheet" href="apricot.css"/>

    <script type="text/javascript">

    var tabLinks = new Array();

    var contentDivs = new Array();



    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 );

    }



    </script>

  </head>



<body onload="init()">



                <p> <img src="apricot.jpg" width="312" height="93" class="center"/> </p>



<ul id="tabs">

        <li><a href="#aboutus">About Us</a></li>

        <li><a href="#services">Services</a></li>

        <li><a href="#resources">Resources</a></li>

        <li><a href="#computers">Computers</a></li>

</ul>



<div class="tabContent" id="aboutus">



<h1>About Us</h1>

        <div>

        <p>Apricot  Recruitment is a privately owned recruitment consultancy that

has been providing effective business solutions to organisations

throughout the UK.  At Apricot Recruitment we help find rewarding

temporary and permanent jobs for the job seeker, as well as provide

companies with highly skilled and motivated staff.  Our specially

trained consultants will find high quality candidates that match your

specific requirements. Clients and Candidates alike appreciate the

personal service we offer. Independent status means we always work in

the best interest of our customers and are therefore able to offer

complete flexibility of service. Each assignment is treated

individually in order to match both the client and candidates

requirements.</p>



        </div>

                </div>



<div class="tabContent" id="services">



<h1>Services</h1>



<div>



<p>Successful companies are built by successful people. Your company

needs the most talented, ambitious and determined individuals in order

to thrive. However, tracking down the ideal candidate can be

challenging.  We at Apricot Recruitment help you find that ideal

candidate.</p>



<p>By using our services you are able to outsource all your recruitment

needs to a single recruitment partner who oversees the entire supply

chain.  With an in depth knowledge of London Business, Apricot

Recruitment is ideally placed to help you locate and attract the best

possible candidates for your business. We specialise in going the

extra mile to find exactly the candidate to suit your business. Using

industry contacts and numerous research methods, we know precisely

where to look for your desired person.</p>



<p>The first step in recruiting the right candidates for your company is

learning about your business requirements, we thoroughly question,

evaluate and pre-interview all candidates before recommending only the

most appropriate for interview. This ensures you receive the very best

person for your role.</p>



<p>The Apricot Recruitment team uses a range of tools to source the best

possible talent.  These tools include:</p>







<ul>

<li>Extensive online and internal database searching.</li>

<li>Advertising in Premium Mediums.</li>

<li>Skills Assessment.</li>

<li>Headhunting.</li>

<li>Reference Checking.</li>

</ul>





</div>

</div>



<div class="tabContent" id="Resources">



<h1>Resources</h1>



<div>



<p>We use lots of resources like monster, totaljobs, gumtree, etc.</p>

</div>

</div>



<div class="tabContent" id="Computers">



<h1>Computers</h1>

        <div>

        <p>Lots of computers.</p>



        </div>

                </div>









</body>

</html>