Switching TABS

[NZ_Kiwis]

I've got the below code which works well with two tables but when i've added a third like below i can not remove it once it's clicked on.. how can i edit this so i can hide more than one table??



<script type="text/javascript" language="Javascript"><!-- // --><![CDATA[
function switchTabs(on, off, tabTitle)
{
var tOn = document.getElementById(on+tabTitle);
var tOff = document.getElementById(off+tabTitle);
var dOn = document.getElementById(on);
var dOff = document.getElementById(off);

tOn.className = "selected";
tOff.className = "deselected";
dOn.style.display = '';
dOff.style.display = 'none';
}
//]]></script>

<td width="16%" bgcolor="#CC9900" align="center"><font id="display1_title"><a href="javascript:switchTabs('display1', 'display2, display3', '_title');">Link</a></td>
<td width="15%" bgcolor="#CC9900" align="center"><font id="display2_title"><a href="javascript:switchTabs('display2', 'display1, display3', '_title');">Link</a></td>
<td width="15%" bgcolor="#CC9900" align="center"><font id="display3_title"><a href="javascript:switchTabs('display3', 'display2, 'display1', '_title');">Link</a></td>


<div id="display1">
<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFE188" align="center">2nd Link</td>
<td bgcolor="#FFE188" align="center">2nd Link</td>
<td bgcolor="#FFE188" align="center">2nd Link</td>
<td bgcolor="#FFE188" align="center">2nd Link</td>
<td bgcolor="#FFE188" align="center">2nd Link</td>
</tr>
</table>
</div>

<div id="display2" style="display:none;">
<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFE188" align="center">2nd Link 2</td>
<td bgcolor="#FFE188" align="center">2nd Link 2</td>
<td bgcolor="#FFE188" align="center">2nd Link 2</td>
<td bgcolor="#FFE188" align="center">2nd Link 2</td>
<td bgcolor="#FFE188" align="center">2nd Link 2</td>
</tr>
</table>
</div>

<div id="display3" style="display:none;">
<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFE188" align="center">2nd Link 3</td>
<td bgcolor="#FFE188" align="center">2nd Link 3</td>
<td bgcolor="#FFE188" align="center">2nd Link 3</td>
<td bgcolor="#FFE188" align="center">2nd Link 3</td>
<td bgcolor="#FFE188" align="center">2nd Link 3</td>
</tr>
</table>
</div>

[JPnyc]

It won't work. I'm amazed it works with 2. IDs must be unique, you cannot have 2 elements on any page with the same ID. Did you test in any browser other than IE? Because that should not work at all.

To use multiple tables you need to rewrite this script . But it's much much quicker and easier to put this intide each table tag:

onclick="this.style.display='none'"

[NZ_Kiwis]

I've spend a day looking but can not find a code which will do what i want. can someone please help