show/hide Toggle not working.

I toggle div tags with this function:

[code]
<script type=”text/javascript”>
function Toggle(which){
if (!document.getElementById)
return
if (which.style.display==”block”)
which.style.display=”none”
else
which.style.display=”block”
}

function Switch(CarID){
for (var i = 1; i<=7; i++){
Toggle(document.getElementById(i+’Show’+CarID));
Toggle(document.getElementById(i+’Edit’+CarID));
}
}

</script>
[/code]

the html :

[code]
<table>

<tr><td valign=”top” ><div id=”1Show1″ align=”left”> Camaro<!–Model –></div><div id=”1Edit1″ style=”display: none”>Now you see me</div></td></tr>
<tr><td valign=”top” ><div id=”2Show1″ align=”left”>Chevrolet<!–Make –></div><div id=”2Edit1″ style=”display: none”>Now you see me</div></td></tr>
<tr><td valign=”top” ><div id=”3Show1″ align=”left”>Car<!–Type –></div><div id=”3Edit1″ style=”display: none”>Now you see me</div></td></tr>
<tr><td valign=”top” ><div id=”4Show1″ align=”left”>1999<!–Year –></div><div id=”4Edit1″ style=”display: none”>Now you see me</div></td></tr>

<tr><td valign=”top” ><div id=”5Show1″ align=”left”>75000<!–Mileage –></div><div id=”5Edit1″ style=”display: none”>Now you see me</div></td></tr>
<tr><td valign=”top” ><div id=”6Show1″ align=”left”>4000<!–Price –></div><div id=”6Edit1″ style=”display: none”>Now you see me</div></td></tr>
<tr><td valign=”top” ><div id=”7Show1″ align=”left”>Used<!–Car lot –></div><div id=”7Edit1″ style=”display: none”>Now you see me</div></td></tr>
<tr><td valign=”top” ><div align=”right”><a href=”javascript: Switch(1);”>Edit</a></div></td></tr>
</table></td></tr></table>
[/code]

The problem is that the first time I click on ‘Edit’ the hidden <div>’s appear and the showing <div>’s dont disapear. The next time I click it, they both appear, and after another click both disapear.

Also in #JavaScript _↴