Show/Hide Navigation OnClick

[Yaggles]

I have a navigation bar I would like to show/hide when "Navigation" is clicked. Here's my navigation bar code:

<table width="100%">
<tr class="lighthover" onMouseOver="style.backgroundColor='#999900';style.color='#006600';" onMouseOut="style.backgroundColor='#009900';style.color='#000000';">
<th width="100%" align="center">&nbsp;&nbsp;&nbsp;&nbsp;Navigation&nbsp;&nbsp;&nbsp;&nbsp;</th>
</tr>
<tr class="lighthover" onMouseOver="style.backgroundColor='#999900';style.color='#006600';" onMouseOut="style.backgroundColor='#009900';style.color='#999900';">
<td width="100%">&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onClick="javascript:do_incPage('indexcontent.php')">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr class="lighthover" onMouseOver="style.backgroundColor='#999900';style.color='#006600';" onMouseOut="style.backgroundColor='#009900';style.color='#999900';">
<td width="100%">&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onClick="javascript:do_incPage('join.php')">Join</a>&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr class="lighthover" onMouseOver="style.backgroundColor='#999900';style.color='#006600';" onMouseOut="style.backgroundColor='#009900';style.color='#999900';">
<td width="100%">&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onClick="javascript:do_incPage('history.php')">History</a>&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr class="lighthover" onMouseOver="style.backgroundColor='#999900';style.color='#006600';" onMouseOut="style.backgroundColor='#009900';style.color='#999900';">
<td width="100%">&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onClick="javascript:do_incPage('index.php')">Charter</a>&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr class="lighthover" onMouseOver="style.backgroundColor='#999900';style.color='#006600';" onMouseOut="style.backgroundColor='#009900';style.color='#999900';">
<td width="100%">&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onClick="javascript:do_incPage('index.php')">Contact</a>&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr class="lighthover">
<td width="100%" height="100" valign="bottom">&nbsp;</td>
</tr>
</table>

NOTE: Don't worry about the class name. ;)

I know it must have something to do with a <div id=""> somewhere, but I don't know where, and I don't know how to do it with javascript. I would like only the <th>...Navigation...</th> to be shown when it it clicked off and all off it to show when it is clicked on, and I just click the Navigation <th> when I want to toggle it.

Thanks!
-Yaggles