Div related Tree Menu problem

The problem I have is relatively simple and as far as my understanding goes can be solved in two ways. I have created a tree menu on one side of my page (just to clarify a tree menu which looks like that found in windows when you right click on start and select explore). The menu toggles and is aligned to the left nicely working just as I had intended. The problem occurs when I try and crate two buttons one to cascade collapse all of the open folders of the tree menu and the other to cascade expand all of the folders (I am using tables for my layout not frames).

Every time I tried this I got an error message (just saying there is an error with the JavaScript on page); here is the JavaScript ‘expand’ code I am using.

[CODE]function Expand() {
divs=document.getElementsByTagName(“DIV”);
for (i=0;i<divs.length;i++) {
divs[i].style.display=”block”;
key=document.getElementById(“x” + divs[i].id);
key.innerHTML=”<img src=’Buttons/minus.gif’ width=’9′ height=’9′ hspace=’0′ vspace=’0′ border=’0′>”;
}
}[/CODE]

This is the code that calls the JavaScript for the expand and collapse functions:

[CODE]<a href=”javascript:Expand();”>Expand</a><a href=”javascript:Collapse();”>Collapse</a>[/CODE]

I realize that what is going wrong here (as far as I can tell) is the expand code is making every div on the page expand which includes the divs for align left and has an error when it meets an align div. I end up having code that works with the ‘expand’ function but with wonky alignment (this is once I delete every align left that involves a div). Here is an example of some of the HTML code in the page. This is the strategy file which when clicked drops down the Investment Strategies item.

[CODE]<div align=”left”>
<table border=”0″ cellpadding=’1′ cellspacing=”1″ class=”MenuTree”>
<tr>
<td width=’16’><a id=”xstrategy” href=”javascript:Toggle(‘strategy’);”><img src=’Buttons/plus.gif’ width=’9′ height=’9′ hspace=’0′ vspace=’0′ border=’0’/></a></td>
<td class=”MenuTree”><a id=”xstrategy” href=”javascript:Toggle(‘strategy’);”><img src=’Buttons/strategy.jpg’ border=’0′ /> </a></td>
</tr>
</table>
</div> <div id=”strategy” style=”display: none; margin-left: 1em;”>
<div align=”left”>
<table border=”0″ cellpadding=’1′ cellspacing=”1″>
<tr>
<td width=’16’><img src=’Buttons/text.gif’ width=’16’ height=’16’ hspace=’0′ vspace=’0′ border=’0′ /></td>
<td><a href=”” target=”master”><span class=”MenuTree”><span class=”style31″>Investment Strategies</span></span></a></td>
</tr>[/CODE]

I was wondering if it were possible in the ‘expand’ code to instead of having it expand all divs only expand the specific divs used in the menu tree. I have tried several times but I can’t seem to get the code right. Alternatively is there a way I can align the menus manually. I have tried <p align=’left’> but that gives a double break at the bottom which is no good. I have also applied CSS (MenuTree) to the menu (left align) with no real luck.

Thanks in advance.

Also in #JavaScript _↴