[Javascript] Javascript Tree menu

[paul at juniperwebcraft.com (Paul Novitski)]

At 10/19/2006 09:36 PM, Brian Jones wrote:
>I have a tree menu at ( http://astro.temple.edu/~tua14115/tree.htm )
>and I am having problems with the "expand all" and "collapse all"
>functions.  Basically they are not working at all. I am looking to
>tweak the javascript code to provide me with  two versions of the tree
>menu.
>
>-One that has the menu fully expanded when the page loads but still
>allows for them to be collasped and expanded and
>
>-One that is like the current version but allows the expand and
>collapse links to work.
>
>Here's the link to my javascript file 
>http://astro.temple.edu/~tua14115/tree.js.


Brian,

Your Expand() and Collapse() functions get arrays of 
document.getElementsByTagName("DIV") but you have no DIVs on the 
page.  That logic must be left over from an earlier iteration of your 
markup.  You need different logic to pinpoint all the sub-menus, e.g. 
document.getElementsByTagName("UL") and then walk through them 
disappearing the ones with certain characteristics.

My approach to this problem would be different -- instead of messing 
with style and innerHTML attributes, I'd toggle the sub-menus by 
toggling the classNames of the clicked LIs between 'expanded' and 
'collapsed' or whatever.  Then you can define those classes in your 
stylesheet to include image name (a background image on the LI 
element) and the display property of the child ULs.

By the way, you've got a typo in your markup here:

         <li><a id="xspecs" href="javascript:Toggle('specs');"><img 
src="folder.gif" width="16px" height="16px" /></a><b>Main2</b></li>
         <ul id="specs" style="display: none; margin-left: 2em;">

You've erroneously closed the LI tag; instead it should enclose the nested UL.

Regards,
Paul