Solved

JavaScript & DHTML Tree List

Posted on 2000-05-12
3
574 Views
Last Modified: 2008-02-07
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>
0
Comment
Question by:yipsv
3 Comments
 
LVL 22

Expert Comment

by:CJ_S
ID: 2805990
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.
0
 
LVL 7

Accepted Solution

by:
nettrom earned 50 total points
ID: 2806683
You're basically re-inventing the wheel here.  Why not look at some of the already available menus for ideas?

http://www.alchemy-computing.co.uk/joust/ for a layer-based outline.

http://www.webreference.com/dhtml/hiermenus/ for a layer-based popup

http://www.treemenu.com/ for my own (yes, it's a shameless plug :) which is frames & table based for backwards compatibility

http://www.brainjar.com/js/treemenu/index.html for Mike Hall's which is similar to mine
0
 

Author Comment

by:yipsv
ID: 2819312
Thank you for the good links info.  They are very helpful.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question