I dunno, but what I meant was that you probably want it to start hidden, and appear when you click.
<script language="JavaScript">
function toggleVisibility(me){
if (me.style.visibility=="hidden"){
me.style.visibility="visible";
}
else {
me.style.visibility="hidden";
}
}
</script>
<a href="#" onclick="toggleVisibility(document.all.submenu1);">Parent Menu Text</a>
<div id="submenu1" style="visibility: hidden">
Sub Menu Text
</div>
Using a function saves time if you need to use it more than once, just change the "submenu1" to something else. Also, it closes when you click it again.
More importantly though, is that when it's hidden, the text below doesn't move to compensate, so it leaves a gap, which I assume you don't want.
The solution in this case would be to use display:block and display:none instead of visibility. So the correct example is:
<html><body>
<script language="JavaScript">
function toggleVisibility(me){
if (me.style.display=="none"){
me.style.display="block";
}
else {
me.style.display="none";
}
}
</script>
<a href="#" onclick="toggleVisibility(document.all.submenu1);">Parent Menu Text</a>
<div id="submenu1" style="display: none">
Sub Menu Text
</div>
</body></html>
which I actually tested, and it works.
