How to create working TABS with javascript and show-hide layers

I am currently working on a CMS project, and the company required a solution to display web TABS on the index page, where they can list the most recent BLOGS from different categories such as "College Football", "College BasketBall" and "College Lacross", basically this site is about College Sports. I was pretty confident to develop one for myself knowing that my Javascript knowledge is not as expert's level, but still it was pretty basic to develop. Due to overload of work, what I did was, I used an open source web tab, but the bad thing was it was extremely difficult to skin it, change colours etc, and it had 3 separate .js files and also separate .css file, which was too bad since it was difficult to change its style, and my client also hated it :) they asked me to change a new within an hour.

the working example of the tabs can be found here
http://www.flaxweb.com/projects/fanslogon2/index.php

<*style>
.tab_hover {
background-color:blue;
color:white;
cursor:pointer;
width:137px;
height:20px;
background-image:url(./images/ltab_blue.gif);
border:0px;
text-align:center;
font-family:verdana;
font-size:12px;
font-weight:bold;
}
.tab {
background-color:blue;
color:white;
cursor:pointer;
width:137px;
height:20px;
background-image:url(./images/ltab_blue2.gif);
border:0px;
text-align:center;
font-family:verdana;
font-size:12px;
font-weight:none;
}
.data_tab {
border:1px solid gray;
width:500px;
height:100px;
text-align:left;
font-family:verdana;
font-size:12px;
padding:.3em;
}

In the second step I created two images, one for which tab is selected, I named it ltab_blue.gif and placed it in the "images" folder, its always recommended to use a separate folder for your images. The second image was for the other two tabs which were not select, and I renamed that image ltab_blue.gif2.gif and placed it in "images" folder.

Third step was to write a very basic script which will show / hide layers, so here it is

<*script>
last_tab = 'tab1';
function show(layerName) {
document.getElementById(layerName).style.display = '';
}

function hide(layerName) {
document.getElementById(layerName).style.display = 'none';
}

Place the above code in tag. You already know that ? yeah most probably, but just wanted to mentioned for the noobs :) The code which I placed in the tag is

<*table cellpadding=0 cellspacing=0 border=0>
<tr>
<td id=tab1 class=tab_hover onclick="java script:show_next('tab1')">Football</td>
<td id=tab2 class=tab onclick="java script:show_next('tab2')">Basketball</td>
<td id=tab3 class=tab onclick="java script:show_next('tab3')">Lacrosse</td>
</tr>
<*/table>

<*table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="100%">
<div id=tab1_data>
$tab1_data
</div>
<div id=tab2_data style='display:none'>
$tab2_data
</div>
<div id=tab3_data style='display:none'>
$tab3_data
</div>
</td>
</tr>
<*/table>

that's it, I wont include the source, you should give it a try and see the results yourself, that's how we learn. By the way you can also control these tabs with external command buttons like this

<*input type=button onclick="javascript:show_next('tab1')" value='Select Tab1'>
<*input type=button onclick="javascript:show_next('tab2')" value='Select Tab2'>
<*input type=button onclick="javascript:show_next('tab3')" value='Select Tab3'>

I hope this will help someone is someway :)
oh yeah I know, YOU ARE WELCOME...

regards
- Ali..