javascript: show/hide function?

[Rip the Jacker]

Hello.

I was wondering how I could code a menu (with list items) that can be 'hidden' and 'displayed' by clicking on a link?

HTML:

<ul id="menu">
<li id="main">Contents</li>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

CSS:

#main {
border:1px solid #ddd;
padding:.05em;
}

JAVASCRIPT?

For the javascript, I want to be able to display/hide the menu by clicking on the first list item 'Content', which has an #id of main.

Something like.. (and this is where i fvck up)

var main = document.getElementById('main');
main.****** = // I don't know how to do unobtrusive event triggers.. but I would want this to get the ParentNode (?) which is the UL #menu and for each time its clicked i want it to either be hidden or displayed.

 

[Rip the Jacker]

up

 

[MrChad]

Use this as a reference, or just use his code (from notfred on these forums).