Link to home
Start Free TrialLog in
Avatar of yipsv
yipsv

asked on

JavaScript & DHTML Tree List

I have tried to build a 3 level collapse tree list, but I can only click and expand the first level.  Do anyone know how to build a expandable tree or any tool out there to help me build the JavaScript and DHTML.

I will be very appriciated for your help.


//--------The gr1_srv1 & grl_srv2 can not expand.
//The output should look like this after expand.
Level 1.0
  .level 2.0
     .level 3.0
     .level 3.1
  .level 2.1
     .level 3.0
     .level 3.1
Level 1.1
   ...
     ...
//---here is my code  

<HTML>
<HEAD>
<TITLE> List testing</TITLE>
<STYLE>
      SPAN      {font-size: 14pt; text-decoration: underline; color: blue; cursor: hand}
      DIV       {font-size: 10pt; cursor: hand}
      .on      {display: on}
      A      {text-decoration: none}
      A:hover {color: red; text-decoration: underline;}
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
//set bSupportsDHTML to true for IE 4 or later.
var bDoesDHTML = ( (navigator.userAgent.indexOf("MSIE") >= 0)
            && (navigator.appVersion.substring(0,1) >= 4) )
if (bDoesDHTML) {document.write("<STYLE>.off{display:none}</STYLE>")}

function doSection(secNum) {
      if (bDoesDHTML) {
      
       if (secNum.className=="off") {secNum.className="on"}
       else {secNum.className="off"}
      
      }
}

//-->
</SCRIPT>
</HEAD>
<BODY>
<SPAN onclick="doSection(group1)"><B>Group 1 </B></SPAN><BR>
   <DIV CLASS="off" ID="group1">
      <DIV CLASS="off" onclick="doSection(g1_srv1)">Server 1 <BR>
            <DIV CLASS="off" ID="g1_srv1">
             &nbsp; &nbsp;<A HREF="rightFrame.html" TARGET="right">Allocated Drives </A>
             &nbsp; &nbsp;<A HREF="rightFrame.html" TARGET="right">Unallocated Drives </A>
             &nbsp; &nbsp;<A HREF="rightFrame.html" TARGET="right">Spare Drives </A>      
            </DIV>
       </DIV>

DIV CLASS="off" onclick="doSection(g1_srv2)">Server 2 <BR>
            <DIV CLASS="off" ID="g1_srv2">
             &nbsp; &nbsp;<A HREF="rightFrame.html" TARGET="right">Allocated Drives </A>
             &nbsp; &nbsp;<A HREF="rightFrame.html" TARGET="right">Unallocated Drives </A>
             &nbsp; &nbsp;<A HREF="rightFrame.html" TARGET="right">Spare Drives </A>      
            </DIV>
       </DIV>
      
      
      
   </DIV>
      
<SPAN onclick="doSection(group2)"><B>Group 2 </B></SPAN><BR>
      <DIV CLASS="off" ID="group2">
       &nbsp;  <A HREF="allocatedDrives.html" TARGET="right">Server 1 </A><BR>
       &nbsp;  <A HREF="unallocatedDrives.html" TARGET="right">Server 2 </A><BR>
       &nbsp;  <A HREF="spareDrives.html" TARGET="right">Server 3 </A><BR>
       &nbsp;  <A HREF="rightFrame.html" TARGET="right">Clients </A><BR>
      </DIV>
<SPAN onclick="doSection(group3)"><B>Group 3</B></SPAN><BR>
      <DIV CLASS="off" ID="group3">
       &nbsp; <A HREF="allocatedDrives.html" TARGET="right">Server 1</A><BR>
       &nbsp; <A HREF="unallocatedDrives.html" TARGET="right">Server 2</A><BR>
       &nbsp; <A HREF="spareDrives.html" TARGET="right">Server 3</A><BR>
       &nbsp; <A HREF="rightFrame.html" TARGET="right">Clients</A><BR>
      </DIV>

<SPAN onclick="doSection(group4)"><B>Group 4</B></SPAN><BR>
      <DIV CLASS="off" ID="group4">
       &nbsp; &nbsp; &nbsp; <A HREF="allocatedDrives.html" TARGET="right">Server 1</A><BR>
       &nbsp; &nbsp; &nbsp; <A HREF="unallocatedDrives.html" TARGET="right">Server 2</A><BR>
       &nbsp; &nbsp; &nbsp; <A HREF="spareDrives.html" TARGET="right">Server 3</A><BR>
       &nbsp; &nbsp; &nbsp; <A HREF="rightFrame.html" TARGET="right">Clients</A><BR>
      </DIV>
</BODY>
</HTML>
      
</HEAD>
</HTML>
Avatar of CJ_S
CJ_S
Flag of Netherlands image
check out www.Bratta.com for some good examples. Or www.dansteinman.com or, popup.jscentral.net.

All 3 of 'em have great menu's.

I can't give you my own source for expandable menu's....because they are scrambled up (for copyright stuff etc.), so no-one else can use 'em.
ASKER CERTIFIED SOLUTION
Avatar of nettrom
nettrom
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of yipsv
yipsv

ASKER

Thank you for the good links info.  They are very helpful.