Expand /Collapse Menu -on page load I need the menu collapsed....

Hi,

could someone help me figureout how to have my menu in the collapsed state when the page loads please ?

here is the javascript ...

function toggleList(id){
if(document.getElementById){
var element = document.getElementById(id);
if(element){
element.style.display =(element.style.display == 'none')?'':'none';
}}}

------------------------
applied to ul div...

<h2>Expand -Collapse</h2> <a href="javascript:toggleList('idname')">[+/-]</a></strong>
<ul id="idname" style="display:block">
<li><a href="#html" target="_self">Number One</a></li>
<li><a href="amana.html" target="_self">Number 2</a></li>
<li><a href="baumatic.html" target="_self">Number 3</a></li></ul>



Which I found from here It's just what I was looking for except that I'd really like it to be in a collapsed state as default.

Thanks in advance for any help I may get

 

change

<h2>Expand -Collapse</h2> <a href="javascript:toggleList('idname')">[+/-]</a></strong>
<ul id="idname" style="display:block">
<li><a href="#html" target="_self">Number One</a></li>
<li><a href="amana.html" target="_self">Number 2</a></li>
<li><a href="baumatic.html" target="_self">Number 3</a></li></ul>

Code (markup):

to

<h2>Expand -Collapse</h2> <a href="javascript:toggleList('idname')">[+/-]</a></strong>
<ul id="idname" style="display:none;">
<li><a href="#html" target="_self">Number One</a></li>
<li><a href="amana.html" target="_self">Number 2</a></li>
<li><a href="baumatic.html" target="_self">Number 3</a></li></ul>

Code (markup):

 

Thanks giraph that's great.

I did mess about with those values but was stabbing in the dark as I don't even know the right terms to use.

Thanks again

 

Hey, how would you make it start "collapsed"?

 

Got it...
didn't notice the style="display:none;">