Sajeev
03-13-2000, 09:25 PM
Hi
I am getting it mixed up. The issue is one of collapsing and expanding the
nodes.The following is the code.
<HTML>
<HEAD>
<TITLE> Folding and unfolding list </TITLE>
<script language = "javascript">
function change(){
if(!document.all) return;
var header = event.srcElement;
if(header.id == "1" ||"2"){
var list = getList(header);
if (list.style.display == "none")unfold(header, list);
else fold(header, list);
}
}
function getHeader(list){
return document.all[list.sourceIndex - 1];
}
function getList(header){
return document.all[header.sourceIndex + 1];
}
function fold(header, list){
list.style.display = "none";
}
function unfold(header, list){
list.style.display = "";
}
//TOGGLE DISPLAY OF ITEMS OFF AND ON
function ToggleView(){
var e = window.event.srcElement;
if (e.id == "div1")
if (oList.style.display == "none"){
oList.style.display = "block";
div1.style.color = "red";
}
else{
oList.style.display = "none";
div1.style.color = "darkblue";
}
}
</script>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<SPAN id = "div1" ondblClick = "ToggleView()" style = "cursor:hand" oncontextmenu
= "return false">TOP LEVEL</SPAN>
<!-- we are going to add a sub div that will hold the contents, this is going
to allow us to hide and show it-->
<UL id ="oList" style = "display:block;cursor:hand" oncontextmenu = "OptionsMenu();return
false">
<li id ="1" ondblclick="change()">First level
<ul>
<li id ="2a">A
<ul id = "subdocu">
<li id = "2aa">B
<ul id = "grph">
<li id ="2aba" style = "color:green;list-style-image:url(smb_grn.gif)">C
</ul>
</ul>
</ul>
<li id ="2" ondblclick="change()">Second level
<ul id = "foldinglist">
<li id = "2a">E
<li id = "2b">F
</ul>
</UL>
</BODY>
</HTML>
The problem is:
1. If I double click on 'C', the 'Second level' is toggling on and off. How
do I prevent that?
2. If I double click on 'B' AFTER doing 1 above, the 'Second level' is
totally missing. I want only 'C' to disappear. Proceeding upward by double
clicking on 'A', the lower levels all have vanished while I want only 'B'
and 'C' to vanish. This behavior continues as I double click on 'A' as well.
Note that all this happens AFTER step 1 above.
Please enlighten.
Thanks
Sajeev
I am getting it mixed up. The issue is one of collapsing and expanding the
nodes.The following is the code.
<HTML>
<HEAD>
<TITLE> Folding and unfolding list </TITLE>
<script language = "javascript">
function change(){
if(!document.all) return;
var header = event.srcElement;
if(header.id == "1" ||"2"){
var list = getList(header);
if (list.style.display == "none")unfold(header, list);
else fold(header, list);
}
}
function getHeader(list){
return document.all[list.sourceIndex - 1];
}
function getList(header){
return document.all[header.sourceIndex + 1];
}
function fold(header, list){
list.style.display = "none";
}
function unfold(header, list){
list.style.display = "";
}
//TOGGLE DISPLAY OF ITEMS OFF AND ON
function ToggleView(){
var e = window.event.srcElement;
if (e.id == "div1")
if (oList.style.display == "none"){
oList.style.display = "block";
div1.style.color = "red";
}
else{
oList.style.display = "none";
div1.style.color = "darkblue";
}
}
</script>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<SPAN id = "div1" ondblClick = "ToggleView()" style = "cursor:hand" oncontextmenu
= "return false">TOP LEVEL</SPAN>
<!-- we are going to add a sub div that will hold the contents, this is going
to allow us to hide and show it-->
<UL id ="oList" style = "display:block;cursor:hand" oncontextmenu = "OptionsMenu();return
false">
<li id ="1" ondblclick="change()">First level
<ul>
<li id ="2a">A
<ul id = "subdocu">
<li id = "2aa">B
<ul id = "grph">
<li id ="2aba" style = "color:green;list-style-image:url(smb_grn.gif)">C
</ul>
</ul>
</ul>
<li id ="2" ondblclick="change()">Second level
<ul id = "foldinglist">
<li id = "2a">E
<li id = "2b">F
</ul>
</UL>
</BODY>
</HTML>
The problem is:
1. If I double click on 'C', the 'Second level' is toggling on and off. How
do I prevent that?
2. If I double click on 'B' AFTER doing 1 above, the 'Second level' is
totally missing. I want only 'C' to disappear. Proceeding upward by double
clicking on 'A', the lower levels all have vanished while I want only 'B'
and 'C' to vanish. This behavior continues as I double click on 'A' as well.
Note that all this happens AFTER step 1 above.
Please enlighten.
Thanks
Sajeev