Expanding menu help

[rogerte]

This is my first attempt at Javascript, and is an expanding vertical menu.

The script:
<script type="text/javascript">
<!--
function toggle_div(id) {
var menuitem = document.getElementsByTagName("div");
for(var x=0; x<menuitem.length; x++) {
name = menuitem[x].getAttribute("name");
if (name == 'expand') {
if (menuitem[x].id == id) {
menuitem[x].style.display = 'block';
}
else{
menuitem[x].style.display = 'none';
}
}
}
}
//-->
</script>


Within the body is a menu:
<ul>
<li><a style="color: #000000" ref="index.html">Home</a></li>
<li style="background-color: #a9acb6;"><a style="color:#000000" href="#" onclick="toggle_div('div1');">Dropdown1</a></li>
<div name="expand" id="div1" style="display:block;">
<ul>
<li><a style="padding-left:13px;color: blue" href="item1.html">Item1</a></li>
<li><a style="padding-left:13px;color: blue" href="item2.html">Item2</a></li>
<li><a style="padding-left:13px;color: blue" href="item3.html">Item3</a></li>
</ul>
</div>
<li style="background-color: #a9acb6;"><a style="color: #000000" href="#" onclick="toggle_div('div2');">Dropdown2</a></li>
<div name="expand" id="div2" style="display:none;">
<ul>
<li><a style="padding-left:13px;color: blue" href="itemA.html">ItemA</a></li>
<li><a style="padding-left:13px;color: blue" href="itemB.html">ItemB</a></li>
<li><a style="padding-left:13px;color: blue" href="itemC.html">ItemC</a></li>
</ul>
</div>
<li><a style="color: #000000" href="ItemX.shtml">ItemX</a></li>
<li><a style="color: #000000" href="ItemY.shtml">ItemY</a></li>
<li><a style="color: #000000" href="ItemZ.shtml">ItemZ</a></li>
</ul>

Clicking on Dropdown1 will expand div1 and collapse div2 and visa versa. This works ok.

However there are 2 problems, which I haven't worked out how to do.

1) Clicking on any LI within an open div will close that div. How do I stop the div closing unless I click on "Dropdown" LI?
2) How can I change it so that it is possible to, additionally, have both divs closed?

Many thanks.

 

[rogerte]

Further to the above post I have been experimenting and found my problems were being caused by me making a couple of silly mistakes in my coding - probably ones that new javascript programmers do.

For example in one place I used a single = instead of a == and in another I got a semi colon the wrong sode of a closing braces sign!

It's amazing how easy it is to make such mistakes. I still make them when using languages I know a lot better.

So no need for a reply, but thanks for reading anyway!