[Javascript] Javascript Tree menu

[paul at juniperwebcraft.com (Paul Novitski)]

At 10/20/2006 11:00 AM, Brian Jones wrote:
>>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.
>
>
>I changed it to getElementsByTagName("UL") but know when i click
>collapse all it hides the whole menu and the expand all still does not
>work...How would i changed the javascript to go about doing it the way
>that you suggested


Hey Brian,

Please re-read your script and think carefully about what it's doing 
at every step.  If you execute document.getElementsByTagName("UL") 
it's going to find all the UL elements in the document -- including 
the master list that contains all the others.  I assume that's the 
only list you don't want to hide.  How will your program 
differentiate the top-most UL from all of its descendant ULs?

One way is to give the top-most UL an id, then perform your search inside it:

HTML:
         <!-- label the top-most list -->
         <ul id="mother">

JavaScript:
         // point to the mother list
         var oMother = document.getElementById('mother');

         // get an array of all lists inside the mother
         var aULs = oMother.getElementsByTagName('UL');

This is a better approach anyway.  It's common for a web page to 
contain more than one unordered list, and you don't want to collapse 
any but your menu.

Regards,
Paul