Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Collapse tree menu using dom???

johkar
Guest
  
Posts: n/a
#1: Jul 23 '05
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>
RobG
Guest
  
Posts: n/a
#2: Jul 23 '05

re: Collapse tree menu using dom???

johkar wrote:
[color=blue]
> 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[/color]

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[i].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...vQ@comcast.com

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[i]);
}
}
listNodes(document.getElementById("listMe"));
alert(out);
</script>


Good luck - Fred.
Fred Oz
Guest
  
Posts: n/a
#3: Jul 23 '05

re: Collapse tree menu using dom???

RobG wrote:[color=blue]
> johkar wrote:
>[color=green]
>> 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[/color]
>
>
> 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):[/color]
[snip][color=blue]
> 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).[/color]


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>
<!-- 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>
johkar N
Guest
  
Posts: n/a
#4: Jul 23 '05

re: Collapse tree menu using dom???

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



*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Fred Oz
Guest
  
Posts: n/a
#5: Jul 23 '05

re: Collapse tree menu using dom???

johkar N wrote:[color=blue]
> 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
>[/color]

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.
RobG
Guest
  
Posts: n/a
#6: Jul 23 '05

re: Collapse tree menu using dom???

johkar N wrote:[color=blue]
> 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?[/color]

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>
johkar N
Guest
  
Posts: n/a
#7: Jul 23 '05

re: Collapse tree menu using dom???

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

if (0[i] != n0) hideUL(o[i]);
if (o[i] != n0) hideUL(o[i]);

John





*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
johkar
Guest
  
Posts: n/a
#8: Jul 23 '05

re: Collapse tree menu using dom???

RobG <rgqld@iinet.net.auau> wrote in message news:<AyF8d.1806$aA.58499@news.optus.net.au>...[color=blue]
> johkar N wrote:[color=green]
> > 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?[/color]
>
> 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>[/color]

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[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='';
//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>
Closed Thread

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,387 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved