CSS | JAVASCRIPT | DHTML Tabs

Recently, I was working on the FoxSports.com NBA Scoreboards. While putting the scoreboard template together using Adobe Spry, I noticed that I would have to create a universal "Tab" system that was easy to reproduce as needed and would work for multiple boards (multiple tab sections) on the same page. I didn't want to jump through hoops and a bunch of extra code to make it happen. SO! here is what I came up with! Check it out!

The first part of this is to setup the HTML structure. Let's start with the Tabs:

<div class="teamGameLeadersHolder">
    <a href="javascript:void(0);" onclick="tabSwitch(this)" class="gl_on" title="Points">Pts</a>
     <a href="javascript:void(0);" onclick="tabSwitch(this)" class="gl_off" title="Rebounding">Rebs</a>
     <a href="javascript:void(0);" onclick="tabSwitch(this)" class="gl_off" title="Assists">Assts</a>
</div>

As you notice, these are all anchors. None of that other stuff. We are going to take these anchors and turn them into tabs using the css. This helps keep the code simple and easy to follow.

NEXT! Let's add some data:

<div class="tgl" title="Points_Data">
--Points Data -- <br />
Points n' stuff...
</div>

<div class="tgl" title="Rebounding_Data">
--Rebounding Data -- <br />
Rebounding n' stuff
</div>

<div class="tgl" title="Assists_Data">
--Assists Data -- <br />
Assisting n' stuff
</div>

</div>

Here I've added 3 divs. The unique thing regarding these divs are the titles (TABS BY TITLES!). The idea is that every anchor has a "title". Add THAT title to the title in the div that contains the information and add "_Data" to it. This way they are easy to identify and easy to reproduce if needed. IE: if you want to add more tabs, add more anchors and a corresponding div matched up by it's title. Example: anchor title="Addam"... Content div title= "Addam_Data".

NEXT!! Let's ad some style!

.teamGameLeadersHolder{
float:left;
width:139px;
height:119px;
overflow:hidden;
margin:0px 2px 0px 0px;
_margin-right:1px;
}

.teamGameLeadersHolder .tgl{
float:left;
clear:both;
width:100%;
_width:98%;
height:80px;
list-style-type:none;
font-size:11px;
padding:5px 0px 0px 0px;
margin:0px 0px 0px 2px;
_margin-left:1px;
text-align:center;
color:#000;
background:#fff;
}

.teamGameLeadersHolder .gl_on,
.teamGameLeadersHolder .gl_off{
float:left;
width:45px;
height:15px;
text-align:center;
text-decoration:none;
margin-left:2px;
color:#fff;
}

.teamGameLeadersHolder .gl_on{
width:43px;
color:#000;
border-bottom:1px solid #fff;
font-weight:bold;
background:url(tab_on.jpg) left top no-repeat;
}

.teamGameLeadersHolder .gl_off{
color:#fff;
_margin-left:1px;
border-bottom:1px solid #000;
background:url(tab_off.jpg) left top no-repeat;
}

Well alrighty!

We've not got some style. If you want to change the tab images n' stuff, you can modify them in the styles: ".teamGameLeadersHolder .gl_on" and ".teamGameLeadersHolder .gl_off". The rest of the styles you can modify as you see fit.

NEXT! Include the script and your are done!

This script is pretty simple. It will look for the "_on" and "_off" to switch them out ass needed. It will also display the correct "_Data" div when it's been selected.

This script can be added anywhere on the page. You can DOWNLOAD IT HERE.

Here is a working version (it's ugly, but it works):

Pts Rebs Assts

--Points Data --
Points n' stuff...

--Rebounding Data --
Rebounds n' stuff...

--Assists Data --
Assists n' stuff...

Hands Eyes Feet

--Hands MAN! --
Hands n' stuff...

--Eyes MAN! --
Eyes n' stuff...

--Feet MAN! --
Feet n' stuff...

Now that you've got this nifty thing looking and working, one of the features is that you can add as many tabs to your page as you want using this setup. Not just tabs but groups of tabs. The script is universal so you should be good to go!