Javascript..Show/Hide code

<script type="text/javascript">
function change(id){
    ID = document.getElementById(id);
    
    if(ID.style.display == "")
         ID.style.display = "none";
    else
         ID.style.display = "";
     }
</script>




<table width="220">
<tr>
    <td title="Show/Hide" onclick="change(1)" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl" width="208" height="25">» <a onclick="change(1)" href="#">Home</a></td>
</tr>

<!-- Sub menu 1 -->
<tr style="display: none" id="1">
    <td class="tbl" width="208" height="25" style="background-color: #FFFFFF">
    Sub 1</td>
</tr>

<tr>
    <td title="Show/Hide" onclick="change(2)" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl" width="208" height="25">» <a onclick="change(2)" href="#">
    Link 2</a></td>
</tr>

<!-- Sub menu 2 -->
<tr style="display: none" id="2">
    <td class="tbl" width="208" height="25" style="background-color: #FFFFFF">
    Sub 2</td>
</tr>
<tr>
<td title="Show/Hide" onclick="change(3)" style="cursor: hand" onMouseOver="style.backgroundColor='#5b9c24';" onMouseOut="style.backgroundColor='#ffffff'" class="tbl" width="208" height="25">»
<a href="#">Link</a><a onclick="change(3)" href="#">

</a><a href="#">3</a></td>
</tr>
<!-- Sub menu 3 -->
<tr style="display: none" id="3">
    <td class="tbl" width="208" height="25" onMouseOver="javascript&#058;this.style.color='5b9c24'" onMouseOut="javascript&#058;this.style.color='000000'">
> Benefits</td>