RobG <rg***@iinet.ne t.auau> wrote in message news:<Ay******* **********@news .optus.net.au>. ..
johkar N wrote: 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?
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="folderhe ader">
<li id="level_2">< a href="#"
onclick="mClick (this)">Report Types</a>
<ul class="folderhe ader">
<li id="level_3">< a href="#"
onclick="mClick (this)">Reports 1</a>
<ul class="folderhe ader">
<li id="level_4">< a href="#"
onclick="mClick (this)">Report Name</a>
<ul class="folderli st">
<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="folderli st">
<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="folderhe ader">
<li id="level_4">< a href="#"
onclick="mClick (this)">Report Name</a>
<ul class="folderli st">
<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="folderli st">
<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="folderhe ader">
<li id="level_2">< a href="#"
onclick="mClick (this)">Report Name</a>
<ul class="folderli st">
<li>Add New Record</li>
<li>Edit Records</li>
</ul>
</li>
</ul>
</li>
<li><a href="#" onclick="resetM enu();">Close menus</a></li>
</ul>
<script type="text/javascript">
resetMenu();
</script>
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.dt d">
<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(repor t.gif);
}
LI {
padding-left:2px;
}
UL {
padding:5px;
}
</style>
<script language="javas cript" 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=='cl ick')
n0.style.listSt yleImage="url(m inus.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=='cl ick')
x.style.listSty leImage="url(pl us.gif)";
}
// Recurse down tree, hiding all ULs
for (var j=0; j<x.childNodes. length; ++j) {
hideUL(x.childN odes[j]);
}
}
// Not really needed, see note below
function resetMenu() {
showMenu(docume nt.getElementBy Id("mainmenu")) ;
}
</script>
</head>
<body>
<ul id="mainmenu">
<li id="level_1"><s pan onclick="showMe nu(this)">Forec ast
Maintenance</span>
<ul class="folderhe ader">
<li id="level_2"><s pan onclick="showMe nu(this)">Input </span>
<ul class="folderhe ader">
<li id="level_3"><s pan onclick="showMe nu(this)">Quart erly
Maintenance</span>
<ul class="folderhe ader">
<li id="level_4"><s pan
onclick="showMe nu(this)">Charg eback Recovery
Accounts</span>
<ul class="folderli st">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><s pan onclick="showMe nu(this)">FACT
Period</span>
<ul class="folderli st">
<li><a href="javascrip t:">Add New Record</a></li>
<li><a href="javascrip t:">Edit Records</a></li>
</ul>
</li>
<li id="level_4"><s pan
onclick="showMe nu(this)">Forec astable Centers</span>
<ul class="folderli st">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><s pan onclick="showMe nu(this)">Forec ast
Rates</span>
<ul class="folderli st">
<li><a href="javascrip t:">Add New Record</a></li>
<li><a href="javascrip t:">Edit Records</a></li>
<li><a href="javascrip t:">Clone Records</a></li>
</ul>
</li>
<li id="level_4"><s pan onclick="showMe nu(this)">Rate
Description
& Job Status</span>
<ul class="folderli st">
<li><a href="javascrip t:">Add New Record</a></li>
<li><a href="javascrip t:">Edit Records</a></li>
</ul>
</li>
</ul>
</li>
<li id="level_3"><s pan onclick="showMe nu(this)">Yearl y
Maintenance</span>
<ul class="folderhe ader">
<li id="level_4"><s pan onclick="showMe nu(this)">Accou nts
For New
Center Setup</span>
<ul class="folderli st">
<li><a href="javascrip t:">Add New Record</a></li>
<li><a href="javascrip t:">Edit Records</a></li>
<li><a href="javascrip t:">Mass Update</a></li>
<li><a href="javascrip t:">Clone Records</a></li>
</ul>
</li>
<li id="level_4"><s pan onclick="showMe nu(this)">Accru al
Periods</span>
<ul class="folderli st">
<li><a href="javascrip t:">Add New Record</a></li>
<li><a href="javascrip t:">Edit Records</a></li>
</ul>
</li>
<li id="level_4"><s pan onclick="showMe nu(this)">Amoun t
Type</span>
<ul class="folderli st">
<li><a href="javascrip t:">Add New Record</a></li>
<li><a href="javascrip t:">Edit Records</a></li>
</ul>
</li>
<li id="level_4"><s pan
onclick="showMe nu(this)">Autoc alculated Accounts</span>
<ul class="folderli st">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><s pan onclick="showMe nu(this)">Forec ast
Account
Type</span>
<ul class="folderli st">
<li><a href="javascrip t:">Add New Record</a></li>
<li><a href="javascrip t:">Edit Records</a></li>
</ul>
</li>
<li id="level_4"><s pan
onclick="showMe nu(this)">Forec astable Accounts</span>
<ul class="folderli st">
<li><a href="javascrip t:">Add New Record</a></li>
<li><a href="javascrip t:">Edit Records</a></li>
<li><a href="javascrip t:">Mass Update</a></li>
<li><a href="javascrip t:">Clone Records</a></li>
</ul>
</li>
<li id="level_4"><s pan
onclick="showMe nu(this)">Forec asters/Reviewers</span>
<ul class="folderli st">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><s pan onclick="showMe nu(this)">Job
Category</span>
<ul class="folderli st">
<li><a href="javascrip t:">Add New Record</a></li>
<li><a href="javascrip t:">Edit Records</a></li>
</ul>
</li>
<li id="level_4"><s pan onclick="showMe nu(this)">Rates
For Rate Driven
Accounts</span>
<ul class="folderli st">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><s pan
onclick="showMe nu(this)">Relat ionship Between
Staff/Salary Type & Accrual Basis</span>
<ul class="folderli st">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><s pan
onclick="showMe nu(this)">Staff/Salary Type</span>
<ul class="folderli st">
<li><a href="javascrip t:">Add New Record</a></li>
<li><a href="javascrip t:">Edit Records</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="level_2"><s pan onclick="showMe nu(this)">Repor ting</span>
<ul class="folderhe ader">
<li id="level_3"><s pan onclick="showMe nu(this)">Forec ast
Iteration Log</span>
<ul class="folderli st">
<li><a href="javascrip t:">Add New Record</a></li>
<li><a href="javascrip t:">Edit Records</a></li>
</ul>
</li>
<li id="level_3"><s pan onclick="showMe nu(this)">Forec ast
Period</span>
<ul class="folderli st">
<li><a href="javascrip t:">Add New Record</a></li>
<li><a href="javascrip t:">Edit Records</a></li>
</ul>
</li>
<li id="level_3"><s pan onclick="showMe nu(this)">Forec ast
Type</span>
<ul class="folderli st">
<li><a href="javascrip t:">Add New Record</a></li>
<li><a href="javascrip t:">Edit Records</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="level_1"><s pan onclick="showMe nu(this)">Ledge r
Maintenance</span>
<ul class="folderhe ader">
<li id="level_2"><s pan onclick="showMe nu(this)">Inves tment
Segment Translation</span>
<ul class="folderli st">
<li><a href="javascrip t:">Add New Record</a></li>
<li><a href="javascrip t:">Edit Records</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
resetMenu();
</script>
</body>
</html>