How can i hide all UL elements?

[randomcows]

Does anyone know how to hide all elements with the same tag.
I have a expanding menu and want to hide all the elements when the page first loads.

my basic menu structure looks like this...
<ul id="100">
<li>Root
<ul id="100200">
<li>sub menu
<ul id="100200300">
<li>sub-sub menu
<ul id="100200300400">
<li>sub-sub-sub menu
<ul id="100200300400500">
<li>sub-sub-sub-sub menu
<ul id="100200300400500600">
<li>action</li>
<li>action</li>
<li>action</li>
<li>action</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

i basically want to have the menu closed when the page loads except for the root UL element (id="100"). I then use javascript to open and close the menu.

Thanks in advance
Mike

[randomcows]

Never Mind, i have solved the problem while browsing the site...

function loader() {
var dls = document.getElementsByTagName("ul");
for (i=0;i<dls.length;i++) {
var dds = dls[i].getElementsByTagName("ul");
for(j=0;j<dds.length;j++){dds[j].style.display="none";}
}
}

[codegoboom]

For one, element id values should not be a number.

If you want to hide all contained UL's, then loop through, starting from the collection:

document.getElementById("_100").getElementsByTagName("LI")

and give each UL a className corresponding to the style of "display:none"

edit: or search the site... :D

[liorean]

Well, any valid id must start with either an underscore or an upper or lower case English alpha letter [_a-zA-Z]. So you need to change that code somewhat.

Second, it's help if you told us how you wanted to expand the menu. CSS or JavaScript? Click or hover? Should it contract when the mouse leaves them or not? Should they contract after some time or directly. Should they animate in some way?

The easiest way is to use CSS to simply not display them, but override that for the root element by using it's id. Another approach is to use JavaScript to contract them when the page has just finished loading.