Javascript tree menu

[lejason]

I am trying to make a tree menu that is similar to this
http://genieindustries.com/service_manuals.asp where you can click an
list item and it will un-hide another list. It seems simple
enough...but when I try it here http://www.wcumc.org/wcumc/w/content.php?type=info
it works in reverse. Meaning, it starts with the list fully expanded
and then by clicking on the parent, it collapses.

So, how do I get it to start closed and then open when its clicked?

I am kinda weak in JS so this is probably a VERY simple question

The relevant code I am working with goes like this -->
<script type="text/javascript" language="javascript">
function show( menu ) {
if( document.getElementById ) {
if( document.getElementById( menu ).style.display == 'block' ) {
document.getElementById( menu ).style.display = 'none';
} else {
document.getElementById( menu ).style.display = 'block';
}
} else if( document.all ) {
if( document.all[ menu ].style.display == 'block' ) {
document.all[ menu ].style.display = 'none';
} else {
document.all[ menu ].style.display = 'block';
}
}
}
</script>

and then to call it its just...

<ul>
<li><a href="javascript:show('menu11')">Test</a>
<ul id="menu11">

 

[scripts.contact]

I am trying to make a tree menu that is similar to thishttp://genieindustries.com/service_manuals.aspwhere you can click an
list item and it will un-hide another list. It seems simple
enough...but when I try it herehttp://www.wcumc.org/wcumc/w/content.php?type=info
it works in reverse. Meaning, it starts with the list fully expanded
and then by clicking on the parent, it collapses.

<script>
function show(menu) {
var d=document,
elemS=(d.getElementById(menu)||d.all[menu]).style
elemS.display=elemS.display=='none'?'block':'none'
}

</script>

<button onclick="show('UL1')">Show/Hide</button>
<ul id="UL1" style="display:none">
<li>x</li>
<li>y</li>
<li>z</li>
</ul>

 

[RobG]

I am trying to make a tree menu that is similar to thishttp://genieindustries.com/service_manuals.aspwhereyou can click an
list item and it will un-hide another list. It seems simple
enough...but when I try it herehttp://www.wcumc.org/wcumc/w/content.php?type=info
it works in reverse. Meaning, it starts with the list fully expanded
and then by clicking on the parent, it collapses.

<script>
function show(menu) {
var d=document,
elemS=(d.getElementById(menu)||d.all[menu]).style
elemS.display=elemS.display=='none'?'block':'none'

A more generic display toggle is between '' and 'none'. An empty
string allows the display attribute to return to the default, or
whatever might have been set by CSS, not just block.

 

[-Lost]

I am trying to make a tree menu that is similar to
thishttp://genieindustries.com/service_manuals.aspwhereyou can click an
list item and it will un-hide another list. It seems simple
enough...but when I try it herehttp://www.wcumc.org/wcumc/w/content.php?type=info
it works in reverse. Meaning, it starts with the list fully expanded
and then by clicking on the parent, it collapses.

<script>
function show(menu) {
var d=document,
elemS=(d.getElementById(menu)||d.all[menu]).style
elemS.display=elemS.display=='none'?'block':'none'

A more generic display toggle is between '' and 'none'. An empty
string allows the display attribute to return to the default, or
whatever might have been set by CSS, not just block.

I am glad I saw this again! I was wondering what it was I had read about that.

So, is this behavior fairly consistent? I had never heard of it before a week or so ago.
More often than not (hell, just recently) I used 'none', 'inline', or 'block' depending on
requirement. I never set it to '', because, well, I had no clue about it. : )

Thanks.

-Lost