Collapse tree menu using dom???

J

johkar

I am confused on childNodes or children. When you have nested lists,
I would think it would all be one list in the Dom, this doesn't seem
to be the case. So how do you traverse an unordered list? Any help
appreciated. John

In the below script, I can expand and contract the nodes when clicked
on, but I want the menu to close all other siblings to the node
clicked so that only one sub menu option is expanded at one time. If
the node display is being set to none, I would also like it to
collapse all the sub nodes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#level_1, #level_2, #level_3, #level_4 {
cursor:pointer;
cursor:hand;
font-weight:normal;
list-style-image:url(plus.gif);
color:#003366;
padding-bottom:5px;
}
..folderheader, .folderlist {
display:none;
}
..folderlist {
list-style-image:url(report.gif);
}
LI {
padding-left:2px;
}
a:visited {
color: #003366;
}
a:hover {
color: #663333;
}
a:active {
color: #003366;
}
a:link {
color: #003366;
}
..style1 {
font-size: 14pt;
font-weight: bold;
}
body {
margin-left: 15px;
}
</style>
<script language="javascript" type="text/javascript">
var head="display:''"
img1=new Image()
img1.src="plus.gif"
img2=new Image()
img2.src="minus.gif"

function showMenu(){
var elm=event.srcElement;
//unsure how to best traverse the dom here in a list
var myMenuLength;
//for(i=0;i<myMenuLength;i++){

//}

//expands or contracts the nodes clicked on
if(elm.id && elm.id.indexOf('level') > -1){
if (elm.childNodes(1).currentStyle.display=="none"){
elm.childNodes(1).style.display="block"
elm.style.listStyleImage="url(minus.gif)"
}
else{
elm.childNodes(1).style.display="none"
elm.style.listStyleImage="url(plus.gif)"
}
}
}
document.onclick=showMenu;
</script>
</head>
<body>
<ul id="mainmenu">
<li id="level_1">Menu 1
<ul class="folderheader">
<li id="level_2">Report Types
<ul class="folderheader">
<li id="level_3">Reports 1
<ul class="folderheader">
<li id="level_4">Report Name
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4">Report Name
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
</ul>
</li>
<li id="level_3">Reports 2
<ul class="folderheader">
<li id="level_4">Report Name
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4">Report Name
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="level_1">Menu 2
<ul class="folderheader">
<li id="level_2">Report Name
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
 
R

RobG

johkar said:
I am confused on childNodes or children. When you have nested lists,
I would think it would all be one list in the Dom, this doesn't seem
to be the case. So how do you traverse an unordered list? Any help
Click to expand...

element.childNodes returns the direct children of a element
as an array, it does not return the children of the
children. When the user clicks on a menu item, you need to
do something like (untested - for illustration only):

var a = <clickedNode>.childNodes;
for (var i=0; i<a.length; ++i) {
a.style.display = '';
}

As the user goes down each level, you then display the
children of each node clicked on. Once the user selects
something at the end of a branch, you then can either:

Remember all the nodes you displayed and explicity
un-display them (hideous! don't try it!) or simply travel
down the branch recursively from the top and un-display all
childNodes whether they were displayed or not (simple).

Here is a recursion routine supplied by Ryan Stewart in a
post here:

news://inetbws1.citec.qld.gov.au:119/[email protected]

Where Ryan has "out += node.nodeName + '\n';"

put in your code to undisplay the node, similar to:

n.style.display = 'none';

Here's the script:

<script type="text/javascript">
var out = "";
function listNodes(n) {
out += n.nodeName + "\n";
for (var i=0; i<n.childNodes.length; ++i) {
listNodes(n.childNodes);
}
}
listNodes(document.getElementById("listMe"));
alert(out);
</script>


Good luck - Fred.
 
F

Fred Oz

RobG said:
johkar said:
I am confused on childNodes or children. When you have nested lists,
I would think it would all be one list in the Dom, this doesn't seem
to be the case. So how do you traverse an unordered list? Any help
Click to expand...


element.childNodes returns the direct children of a element as an array,
it does not return the children of the children. When the user clicks on
a menu item, you need to do something like (untested - for illustration
only): [snip]
you then can either:

Remember all the nodes you displayed and explicity un-display them
(hideous! don't try it!) or simply travel down the branch recursively
from the top and un-display all childNodes whether they were displayed
or not (simple).
Click to expand...


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 != n0) hideUL(o);
}

// 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>
<!-- Menus start here -->

<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>

<!-- Hide menus -->

<!--
If not intending to reset menus when link clicked
put the reset code here and get rid of resetMenu()
-->

<script type="text/javascript">
resetMenu();
</script>

<!-- Menus end here, put content below -->

</body>
</html>
 
J

johkar N

Thank you for the reply. FYI, I did have to change childnodes to
childNodes in a couple of places. I don't fully understand this script
yet. When I tried to add even more submenus as in my original example,
it errored out. I am still looking at the script. Any pointers?

John
 
F

Fred Oz

johkar said:
Thank you for the reply. FYI, I did have to change childnodes to
childNodes in a couple of places. I don't fully understand this script
yet. When I tried to add even more submenus as in my original example,
it errored out. I am still looking at the script. Any pointers?

John
Click to expand...

I tested the script I supplied up to 5 levels deep with about 40 items
and it works in a flash on my ancient Machine. The HTML gets a bit
unweildy, check your markup thoroughly.

My code uses exactly the same function call every time and only requires
one LI or UL at the top to have an id, the rest don't need one. There
are probably some tricks you can do with CSS to optimise it further.

Cheers, Fred.
 
R

RobG

johkar said:
Thank you for the reply. FYI, I did have to change childnodes to
childNodes in a couple of places. I don't fully understand this script
yet. When I tried to add even more submenus as in my original example,
it errored out. I am still looking at the script. Any pointers?
Click to expand...

I simply applied Fred's

<a href="#" onclick="mClick(this)"> stuff </a>

to each header in your orginal stuff and it worked fine (see
below). To get it working in IE, get rid of this style:

...folderheader, .folderlist {
display:none;
}

It's pretty hard to click on something that is hidden from
the get go. Also, if you hide stuff with styles and the JS
doesn't work, you will never see anything.

Cheers, Rob.

<ul id="mainmenu">
<li id="level_1"><a href="#"
onclick="mClick(this)">Menu 1</a>
<ul class="folderheader">
<li id="level_2"><a href="#"
onclick="mClick(this)">Report Types</a>
<ul class="folderheader">
<li id="level_3"><a href="#"
onclick="mClick(this)">Reports 1</a>
<ul class="folderheader">
<li id="level_4"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
</ul>
</li>
<li id="level_3"><a href="#"
onclick="mClick(this)">Reports 2</a>
<ul class="folderheader">
<li id="level_4"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="level_1"><a href="#"
onclick="mClick(this)">Menu 2</a>
<ul class="folderheader">
<li id="level_2"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
</ul>
</li>
</ul>
</li>
<li><a href="#" onclick="resetMenu();">Close menus</a></li>
</ul>

<script type="text/javascript">
resetMenu();
</script>
 
J

johkar N

Thank you all. I got it. Great script. I changed, 0 to o
because I couldn't fine 0 referenced...seemed to work both ways...not
sure why.

if (0 != n0) hideUL(o);
if (o != n0) hideUL(o);

John
 
J

johkar

RobG said:
I simply applied Fred's

<a href="#" onclick="mClick(this)"> stuff </a>

to each header in your orginal stuff and it worked fine (see
below). To get it working in IE, get rid of this style:

..folderheader, .folderlist {
display:none;
}

It's pretty hard to click on something that is hidden from
the get go. Also, if you hide stuff with styles and the JS
doesn't work, you will never see anything.

Cheers, Rob.

<ul id="mainmenu">
<li id="level_1"><a href="#"
onclick="mClick(this)">Menu 1</a>
<ul class="folderheader">
<li id="level_2"><a href="#"
onclick="mClick(this)">Report Types</a>
<ul class="folderheader">
<li id="level_3"><a href="#"
onclick="mClick(this)">Reports 1</a>
<ul class="folderheader">
<li id="level_4"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
</ul>
</li>
<li id="level_3"><a href="#"
onclick="mClick(this)">Reports 2</a>
<ul class="folderheader">
<li id="level_4"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="level_1"><a href="#"
onclick="mClick(this)">Menu 2</a>
<ul class="folderheader">
<li id="level_2"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
</ul>
</li>
</ul>
</li>
<li><a href="#" onclick="resetMenu();">Close menus</a></li>
</ul>

<script type="text/javascript">
resetMenu();
</script>
Click to expand...

MY QUESTION ####################

Ok, I am back at this, I am having trouble getting the plus and minus
gifs to show at the appropriate time. I.E. Click on a node and it
turns to a minus. Click on a another node and all nodes with an ID
containing "level" in their name turn to a plus sign except for the
one you are on or its children. The ALL CAPS COMMENTS are where I am
currently trying to do this (incorrectly).

All help or pointers appreciated. John

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#level_1, #level_2, #level_3, #level_4 {
cursor:pointer;
cursor:hand;
font-weight:normal;
list-style-image:url(plus.gif);
color:#003366;
padding-bottom:5px;
}
..folderlist {
list-style-image:url(report.gif);
}
LI {
padding-left:2px;
}
UL {
padding:5px;
}
</style>
<script language="javascript" type="text/javascript">
var head="display:''"
img1=new Image()
img1.src="plus.gif"
img2=new Image()
img2.src="minus.gif"

function showMenu(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 (o != n0){
hideUL(o);
}
}

// 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='';
//THIS SEEMS TO WORK. FLIP THE NODE CLICKED ON TO A MINUS SIGN???
if(event && event.type=='click')
n0.style.listStyleImage="url(minus.gif)";
}
}

}
function hideUL(x) {
// Hide UL
if (x.nodeName == 'UL'){
x.style.display='none';
//HOW DO I GET THE OTHER NODES BACK TO A PLUS SIGN???
if(event && event.type=='click')
x.style.listStyleImage="url(plus.gif)";
}

// 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() {
showMenu(document.getElementById("mainmenu"));
}
</script>
</head>
<body>
<ul id="mainmenu">
<li id="level_1"><span onclick="showMenu(this)">Forecast
Maintenance</span>
<ul class="folderheader">
<li id="level_2"><span onclick="showMenu(this)">Input</span>
<ul class="folderheader">
<li id="level_3"><span onclick="showMenu(this)">Quarterly
Maintenance</span>
<ul class="folderheader">
<li id="level_4"><span
onclick="showMenu(this)">Chargeback Recovery
Accounts</span>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><span onclick="showMenu(this)">FACT
Period</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
<li id="level_4"><span
onclick="showMenu(this)">Forecastable Centers</span>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><span onclick="showMenu(this)">Forecast
Rates</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
<li><a href="javascript:">Clone Records</a></li>
</ul>
</li>
<li id="level_4"><span onclick="showMenu(this)">Rate
Description
&amp; Job Status</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
</ul>
</li>
<li id="level_3"><span onclick="showMenu(this)">Yearly
Maintenance</span>
<ul class="folderheader">
<li id="level_4"><span onclick="showMenu(this)">Accounts
For New
Center Setup</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
<li><a href="javascript:">Mass Update</a></li>
<li><a href="javascript:">Clone Records</a></li>
</ul>
</li>
<li id="level_4"><span onclick="showMenu(this)">Accrual
Periods</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
<li id="level_4"><span onclick="showMenu(this)">Amount
Type</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
<li id="level_4"><span
onclick="showMenu(this)">Autocalculated Accounts</span>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><span onclick="showMenu(this)">Forecast
Account
Type</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
<li id="level_4"><span
onclick="showMenu(this)">Forecastable Accounts</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
<li><a href="javascript:">Mass Update</a></li>
<li><a href="javascript:">Clone Records</a></li>
</ul>
</li>
<li id="level_4"><span
onclick="showMenu(this)">Forecasters/Reviewers</span>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><span onclick="showMenu(this)">Job
Category</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
<li id="level_4"><span onclick="showMenu(this)">Rates
For Rate Driven
Accounts</span>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><span
onclick="showMenu(this)">Relationship Between
Staff/Salary Type &amp; Accrual Basis</span>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><span
onclick="showMenu(this)">Staff/Salary Type</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="level_2"><span onclick="showMenu(this)">Reporting</span>
<ul class="folderheader">
<li id="level_3"><span onclick="showMenu(this)">Forecast
Iteration Log</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
<li id="level_3"><span onclick="showMenu(this)">Forecast
Period</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
<li id="level_3"><span onclick="showMenu(this)">Forecast
Type</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="level_1"><span onclick="showMenu(this)">Ledger
Maintenance</span>
<ul class="folderheader">
<li id="level_2"><span onclick="showMenu(this)">Investment
Segment Translation</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
resetMenu();
</script>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Dropdown menu in a fixed navbar 2
Working on mobile css menu with plenty of frustration! 2
Survey details won't go through using php, ajax, Mysql 0
PHP RSS Feed Aggregator changing to todays date everytime feed is aggregated 1
How do I change the li class dynamically using a menu.html includefile? 5
Horizontal CSS and Javascript menu 2
CSS menu problems with IE 7 2
Help with CSS margin collapse 6

Members online

Total: 30 (members: 1, guests: 29)
Robots: 355

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,070
Latest member
BiogenixGummies

Latest Threads

Top