Neverside

[JavaScript]Collapsible/Expandable Menu w. cookies

Hey I have Collapsible/Expandable Menus on my website but I would like to have cookies to remember how the users settings were, so that next time they visit the same menus are open and closed. Anybody who wanna help me out or have a good tutorial?

The menus are on the left side on this site www.nerdcamp.dk

Here is my js:

function flip(rid) {
current=(document.getElementById(rid).style.display == 'block') ? 'none' : 'block';
document.getElementById(rid).style.display = current;
}
function hide(rid) {
document.getElementById(rid).style.display = 'none';
}
function show(rid) {
document.getElementById(rid).style.display = 'block';
}

and the HTML:

<!--START first menu -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style='color:#888888'><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="fat1"><span class="gensmalldong">&nbsp;Generelle Fora</span></td>
<td height="18" class="fat1b"><div align="right"><a name='103'><a href='' ONCLICK="flip('q103'); return false;"><img src="/forum/images/openclose.gif" width="9" height="9" border="0"></a>&nbsp;&nbsp;</div></td>
</tr>
<tr>
<td height="1" class="fat3" colspan="2"></td>
</tr>
</table>
<span ID='q103'>
<script language="JAVASCRIPT">flip('q103');</SCRIPT>
<div style='padding:0px; margin:0px; color:#FFFFFF'>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="16" height="18" class="fat2"><div align="center"><img src="/forum/images/icons_pixel/news.gif" width="13" height="10"></div></td>
<td height="18" class="fat2c">&nbsp;<a href="http://nerdcamp.dk/forum/viewforum.php?f=1" class="submenu">Nyheds Forum</a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="1" class="fat3"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="16" height="18" class="fat2"><div align="center"><img src="/forum/images/icons_pixel/news.gif" width="13" height="10"></div></td>
<td height="18" class="fat2c">&nbsp;<a href="http://nerdcamp.dk/forum/viewforum.php?f=9" class="submenu">Generelt</a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="1" class="fat3"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="16" height="18" class="fat2"><div align="center"><img src="/forum/images/icons_pixel/news.gif" width="13" height="10"></div></td>
<td height="18" class="fat2c">&nbsp;<a href="http://nerdcamp.dk/forum/viewforum.php?f=3" class="submenu">Afstemnings Forum</a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="1" class="fat3"></td>
</tr>
</table>
</div>
</span></td>
</tr>
</table>
<!--END Generel menu -->
<!--START Counter-Strike menu -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style='color:#888888'><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="fat1"><span class="gensmalldong">&nbsp;Counter-Strike Fora </span></td>
<td height="18" class="fat1b"><div align="right"><a name='100'><a href='' ONCLICK="flip('q100'); return false;"><img src="/forum/images/openclose.gif" width="9" height="9" border="0"></a>&nbsp;&nbsp;</div></td>
</tr>
<tr>
<td height="1" class="fat3" colspan="2"></td>
</tr>
</table>
<span ID='q100'>
<script language="JAVASCRIPT">flip('q100');</SCRIPT>
<div style='padding:0px; margin:0px; color:#FFFFFF'>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="16" height="18" class="fat2"><div align="center"><img src="/forum/images/icons_pixel/news.gif" width="13" height="10"></div></td>
<td height="18" class="fat2c">&nbsp;<a href="http://nerdcamp.dk/forum/viewforum.php?f=25" class="submenu">Counter-Strike Nyheder</a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="1" class="fat3"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="16" height="18" class="fat2"><div align="center"><img src="/forum/images/icons_pixel/news.gif" width="13" height="10"></div></td>
<td height="18" class="fat2c">&nbsp;<a href="http://nerdcamp.dk/forum/viewforum.php?f=22" class="submenu">Counter-Strike Source</a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="1" class="fat3"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="16" height="18" class="fat2"><div align="center"><img src="/forum/images/icons_pixel/news.gif" width="13" height="10"></div></td>
<td height="18" class="fat2c">&nbsp;<a href="http://nerdcamp.dk/forum/viewforum.php?f=5" class="submenu">Counter-Strike 1.6 &amp; Condition Zero</a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="1" class="fat3"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="16" height="18" class="fat2"><div align="center"><img src="/forum/images/icons_pixel/download.gif" width="9" height="9"></div></td>
<td height="18" class="fat2c">&nbsp;<a href="http://nerdcamp.dk/forum/viewforum.php?f=23" class="submenu">Counter-Strike: Guides & Downloads </a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="1" class="fat3"></td>
</tr>
</table>
</div>
</span></td>
</tr>
</table>
<!--END Counter-strike menu -->
<!--START Server menu -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style='color:#888888'><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="fat1"><span class="gensmalldong">&nbsp;NerdCamp Server Fora </span></td>
<td height="18" class="fat1b"><div align="right"><a name='101'><a href='' ONCLICK="flip('q101'); return false;"><img src="/forum/images/openclose.gif" width="9" height="9" border="0"></a>&nbsp;&nbsp;</div></td>
</tr>
<tr>
<td height="1" class="fat3" colspan="2"></td>
</tr>
</table>
<span ID='q101'>
<script language="JAVASCRIPT">flip('q101');</SCRIPT>
<div style='padding:0px; margin:0px; color:#FFFFFF'>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="16" height="18" class="fat2"><div align="center"><img src="/forum/images/icons_pixel/server3.gif" width="13" height="10"></div></td>
<td height="18" class="fat2c">&nbsp;<a href="#" class="submenu"><s>Stats Main</s></a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="1" class="fat3"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="16" height="18" class="fat2"><div align="center"><img src="/forum/images/icons_pixel/server3.gif" width="13" height="10"></div></td>
<td height="18" class="fat2c">&nbsp;<a href="#" class="submenu"><s>Player Rankings</s></a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="1" class="fat3"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="16" height="18" class="fat2"><div align="center"><img src="/forum/images/icons_pixel/server3.gif" width="13" height="10"></div></td>
<td height="18" class="fat2c">&nbsp;<a href="#" class="submenu"><s>Weapon Rankings</s></a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="1" class="fat3"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="16" height="18" class="fat2"><div align="center"><img src="/forum/images/icons_pixel/server3.gif" width="13" height="10"></div></td>
<td height="18" class="fat2c">&nbsp;<a href="#" class="submenu"><s>Clan Rankings</s></a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="1" class="fat3"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="16" height="18" class="fat2"><div align="center"><img src="/forum/images/icons_pixel/server3.gif" width="13" height="10"></div></td>
<td height="18" class="fat2c">&nbsp;<a href="http://nerdcamp.dk/forum/faq2.php" class="submenu">Server FAQ</a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="1" class="fat3"></td>
</tr>
</table>
</div>
</span></td>
</tr>
</table>
<!--END Server menu -->
<!--START NerdCamp forum menu -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style='color:#888888'><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="fat1"><span class="gensmalldong">&nbsp;NerdCamp Fora</span></td>
<td height="18" class="fat1b"><div align="right"><a name='102'><a href='' ONCLICK="flip('q102'); return false;"><img src="/forum/images/openclose.gif" width="9" height="9" border="0"></a>&nbsp;&nbsp;</div></td>
</tr>
<tr>
<td height="1" class="fat3" colspan="2"></td>
</tr>
</table>
<span ID='q102'>
<script language="JAVASCRIPT">flip('q102');</SCRIPT>
<div style='padding:0px; margin:0px; color:#FFFFFF'>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="16" height="18" class="fat2"><div align="center"><img src="/forum/images/icons_pixel/lock3.gif" width="11" height="11"></div></td>
<td height="18" class="fat2c">&nbsp;<a href="http://nerdcamp.dk/forum/viewforum.php?f=2" class="submenu">NerdCamp Clan</a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="1" class="fat3"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="16" height="18" class="fat2"><div align="center"><img src="/forum/images/icons_pixel/lock3.gif" width="11" height="11"></div></td>
<td height="18" class="fat2c">&nbsp;<a href="http://nerdcamp.dk/forum/viewforum.php?f=4" class="submenu">NerdCamp Crew</a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="1" class="fat3"></td>
</tr>
</table>
</div>
</span></td>
</tr>
</table>
<!--END NerdCamp forum menu -->

Thanks in advance