Reply to thread

Message: [QUOTE="Fred Oz, post: 4732118"] Good start Rob, I've had a play and come up with the following lightly tested collapsing menus. They are hidden with JS so work if JS is turned off. Just add links as required, presumably they'd bring up content in an iFrame. The only decision is whether to leave the menus extended when a link is clicked on (my preference as it acts as a kind of breadcrumb) or to reset them. I've included an example with the following. They could be further optimised by not going down the tree if the UL is already hidden, but hardly seems worth it if the menues are small. The script only hides ULs, not anything else but that effectively hides all the children of the UL. Watch for wrapping... <html> <head><title>Collapsing Menu Example</title> <meta name="Date" content="2004-10-05"> <meta name="Author" content="Fred Oz"> <script type="text/javascript"> // Handle menu click function mClick(n) { // Go up to LI or UL, whichever comes first // Will always be LI except on load when will be UL while (n.nodeName != 'LI' && n.nodeName != 'UL') { n = n.parentNode; } // remember node var n0 = n; // Go up to UL if stopped at LI above while (n.nodeName != 'UL') { n = n.parentNode; } // Make children of all sibling UL's hidden // Do not hide kids of node clicked on // to prevent flashing off & on var o = n.childNodes; for (var i=0; i<o.length; ++i) { if (0[i] != n0) hideUL(o[i]); } // Make children of node clicked on visible for (var k=0; k<n0.childNodes.length; ++k) { if (n0.childNodes[k].style) n0.childNodes[k].style.display=''; } } function hideUL(x) { // Hide UL if (x.nodeName == 'UL') x.style.display='none'; // Recurse down tree, hiding all ULs for (var j=0; j<x.childNodes.length; ++j) { hideUL(x.childNodes[j]); } } // Not really needed, see note below function resetMenu() { mClick(document.getElementById("menu0")); } </script> </head> <body>  <ul id="menu0"> <li><a href="#" onclick="mClick(this)">menu 0 Level 0</a> <ul id="menu1"> <li><a href="#" onclick="mClick(this)">menu 0 Level 0 Level 0</a> <ul> <li>menu 0 Level 0 Level 0 Level 0</li> <li>menu 0 Level 0 Level 0 Level 1</li> <li><a href="#" onclick=" alert('About to reset the menu,' + '\nI don\'t like this behaviour'); resetMenu(); ">menu 0 Level 0 Level 0 Level 2</a></li> </ul </li> <li><a href="#" onclick="mClick(this);">menu 0 Level 0 Level 1</a> <ul> <li>menu 0 Level 0 Level 1 Level 0</li> <li>menu 0 Level 0 Level 1 Level 1</li> <li>menu 0 Level 0 Level 1 Level 2</li> </ul </li> </ul> </li> <li><a href="#" onclick="mClick(this)">menu 0 Level 1</a> <ul> <li><a href="#" onclick="mClick(this)">menu 0 Level 1 Level 0</a> <ul> <li>menu 0 Level 1 Level 0 Level 0</li> <li>menu 0 Level 1 Level 0 Level 1</li> <li>menu 0 Level 1 Level 0 Level 2</li> </ul </li> <li><a href="#" onclick="mClick(this)">menu 0 Level 1 Level 1</a> <ul> <li>menu 0 Level 1 Level 1 Level 0</li> <li>menu 0 Level 1 Level 1 Level 1</li> <li>menu 0 Level 1 Level 1 Level 2</li> </ul </li> </ul> </li> </ul>   <script type="text/javascript"> resetMenu(); </script>  </body> </html>[/i][/i] [/QUOTE]

Verification