Hidden menu problem

Hi
ive got a problem. It’s one of those bugs you think are easy to solve, but after 5 hours of dealing with them make you sick.

I wanted a menu which will be hidden at the beginning, and appearing after clicking a button.
Ive got an easy script. firstly, the html table

[code=html] <tr>
<td title=”Show/Hide” onclick=”change(1)” style=”cursor: hand” onMouseOver=”style.backgroundColor=’#cecece’;” onMouseOut=”style.backgroundColor=’#F3F3F3′” class=”menuTable” width=”147″ height=”25″>&#187;
<a href=”#”>Products by Label</a><a onclick=”change(1)” href=”#”>

</a></td>
</tr>
<tr style=”display: none” id=”1″>
<td class=”menuTable” width=”147″ height=”25″ style=”background-color: #FFFFFF”>

</td>
</tr>

<!– Sub menu –>
<tr>
<td title=”Show/Hide” onclick=”change(2)” style=”cursor: hand” onMouseOver=”style.backgroundColor=’#cecece’;” onMouseOut=”style.backgroundColor=’#F3F3F3′” class=”menuTable” width=”147″ height=”25″>&#187;
<a href=”#”>Products by Category</a><a onclick=”change(2)” href=”#”>

</a></td>
</tr>
<tr style=”display: none” id=”2″ >
<td class=”menuTable” width=”147″ height=”25″ style=”background-color: #FFFFFF”>

<!— ASP lists the content of menu —>
[/code]

and the function:

[code=html]
<script type=”text/javascript”>
function change(id) {
ID = document.getElementById(id);

/* hiding the menu */
if (ID.style.display == “” ) {
ID.style.display = “none”;

}

else
/* showing the menu*/
{
ID.style.display = “”;

}
}
</script>
[/code]

ok, so the problem is – After each reload, it closes the menu. However, i want it to remain open until the user clicks the button again, or opens another category. does anybody have a smart idea to solve it?

Also in #JavaScript _↴