Inside Technique : WebFX DHTML Demos : Folder Tree-View

This script helps you create expanding and collapsing tree-views. It supports unlimited number of folders, levels and documents. This example includes script and images for creating the tree-view. The complete script with the images have been combined into a single downloadable zip file.

To use the folder tree-view, you need to include the folder script in your page's header as follows.

<script src="foldernav.js" type="text/javascript"></script>

Next, you need to define your tree-view as shown in the following example:

<div ID="mParent" class="parent">
<a name="ma" href="#" onClick="FolderExpand('m','top')">
<img name="mTree" src="images/topopen.gif" class="icon" align="absmiddle" border="0"><font 
color="black" size="2" class="item">Top Level</font></a>
</div>

<div ID="mChild">

<div ID="m1Parent" class="parent">
  <a name="m1a" href="#" onClick="FolderExpand('m1')">
  <img name="m1Tree" src="images/Tplus.gif" align="absmiddle" border="0">
  <img name="m1Folder" src="images/foldericon.gif" class="icon" align="absmiddle" border="0">
  <font color="black" size="2" class="item">Folder 1
  </font></a></div>
<div ID="m1Child" CLASS="child">
  <div ID="m3Parent" class="parent">
    <a name="m3a" href="#" onClick="FolderExpand('m3')">
    <img src="images/I.gif" align="absmiddle" border="0">
    <img name="m3Tree" src="images/Tplus.gif" align="absmiddle" border="0">
    <img name="m3Folder" src="images/foldericon.gif" class="icon" align="absmiddle" border="0">
    <font color="black" size="2" class="item">Folder 3
    </font></a>
  </div>
  <div ID="m3Child" CLASS="child">
    <div ID="m4Parent" class="parent">
      <a name="m4a" href="#" onClick="FolderExpand('m4')">
      <img src="images/I.gif" align="absmiddle" border="0">
      <img src="images/I.gif" align="absmiddle" border="0">
      <img name="m4Tree" src="images/Tplus.gif" align="absmiddle" border="0">
      <img name="m4Folder" src="images/foldericon.gif" class="icon" align="absmiddle" border="0">
      <font color="black" size="2" class="item">Folder 4
      </font></a>
    </div>
    <div ID="m4Child" CLASS="child">
      <img src="images/I.gif" align="absmiddle">
      <img src="images/I.gif" align="absmiddle">
      <img src="images/I.gif" align="absmiddle">
      <img src="images/T.gif" align="absmiddle">
      <img src="images/htmlicon.gif" align="absmiddle" class="icon">
      <a class="item" href="#">Document 1
      </a><br>
      <img src="images/I.gif" align="absmiddle">
      <img src="images/I.gif" align="absmiddle">
      <img src="images/I.gif" align="absmiddle">
      <img src="images/T.gif" align="absmiddle">
      <img src="images/htmlicon.gif" align="absmiddle" class="icon">
      <a class="item" href="#">Document 2
      </a><br>
      <img src="images/I.gif" align="absmiddle">
      <img src="images/I.gif" align="absmiddle">
      <img src="images/I.gif" align="absmiddle">
      <img src="images/L.gif" align="absmiddle">
      <img src="images/htmlicon.gif" align="absmiddle" class="icon">
      <a class="item" href="#">Document 3
      </a><br>
    </div>
    <img src="images/I.gif" align="absmiddle">
    <img src="images/I.gif" align="absmiddle">
    <img src="images/T.gif" align="absmiddle">
    <img src="images/htmlicon.gif" align="absmiddle" class="icon">
    <a class="item" href="#">Document 1
    </a><br>
    <img src="images/I.gif" align="absmiddle">
    <img src="images/I.gif" align="absmiddle">
    <img src="images/T.gif" align="absmiddle">
    <img src="images/htmlicon.gif" align="absmiddle" class="icon">
    <a class="item" href="#">Document 2
    </a><br>
    <img src="images/I.gif" align="absmiddle">
    <img src="images/I.gif" align="absmiddle">
    <img src="images/L.gif" align="absmiddle">
    <img src="images/htmlicon.gif" align="absmiddle" class="icon">
    <a class="item" href="#">Document 3
    </a><br>
  </div>
  <img src="images/I.gif" align="absmiddle">
  <img src="images/T.gif" align="absmiddle">
  <img src="images/htmlicon.gif" align="absmiddle" class="icon">
  <a class="item" href="#">Document 1</a><br>
  <img src="images/I.gif" align="absmiddle">
  <img src="images/T.gif" align="absmiddle">
  <img src="images/htmlicon.gif" align="absmiddle" class="icon">
  <a class="item" href="#">Document 2
  </a><br>
  <img src="images/I.gif" align="absmiddle">
  <img src="images/L.gif" align="absmiddle">
  <img src="images/htmlicon.gif" align="absmiddle" class="icon">
  <a class="item" href="#">Document 3
  </a><br>
</div>

<div ID="m2Parent" class="parent">
  <a name="m2a" href="#" onClick="FolderExpand('m2','last')">
  <img name="m2Tree" src="images/Lplus.gif" align="absmiddle" border="0">
  <img name="m2Folder" src="images/foldericon.gif" class="icon" align="absmiddle" border="0">
  <font color="black" size="2" class="item">Folder 2
  </font></a></div>
  <div ID="m2Child" CLASS="child">
    <img src="images/white.gif" align="absmiddle">
    <img src="images/T.gif" align="absmiddle">
    <img src="images/htmlicon.gif" align="absmiddle" class="icon">
    <a class="item" href="#">Document 1</a><br>
    <img src="images/white.gif" align="absmiddle">
    <img src="images/T.gif" align="absmiddle">
    <img src="images/htmlicon.gif" align="absmiddle" class="icon">
    <a class="item" href="#">Document 2
    </a><br>
    <img src="images/white.gif" align="absmiddle">
    <img src="images/L.gif" align="absmiddle">
    <img src="images/htmlicon.gif" align="absmiddle" class="icon">
    <a class="item" href="#">Document 3</a><br>
  </div>
</div>

The above HTML is rendered as follows:

Demonstration requires Internet Explorer 4.0 or later

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.