Download JavaScript Code Examples, Tutorials, Reference

Description

This script is used to display content in a familiar "Explorer" type fashion.

Simply click the little icon (or the header text itself) and the content in the folder will collapse/expand.

The icon will switch state when the folders are opened and closed. These icons are:

minus.gif: This image is shown when the folders are opened.
plus.gif: This image is shown when the fodlers are closed.

The default images are those of actual little folders, but I have also included (in the downloadable zip file) optional plus sign and minus sign images.

Installation

You'll need to paste a few lines of stylesheet code in the HEAD section of your page to give the elements the properties they need to allow the script to work.:

<style type="text/css">
.folder { cursor:default; display:block; padding:6 0 0 0; }
.content { display:none; padding: 0 0 0 40; }
.container{ display:block; }
</style>

You can adjust the values in these, but the preset ones give the best effect. You can also add in font style declarations.

Then, you'll need to paste one line of javascript in your page.

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

This next step is probably the most difficult one, especially if you plan on having multiple nesting branches. There is a specific format that needs to be followed. First, let me explain the basic parts of the elements:
- The Folder SPAN element. This is the header with the plus/minus sign next to it and is the one you click to expand the content.
- The Content DIV element. This is the section that is not visible until you click the header text. This is also where you put other sets of elements if you are going to have other branches.
- The Container DIV element. This is the container that holds both of the elements above.
The following example shows the basic structure:

<div class="container">
<span class="folder"><img src="plus.gif"> The Header Text </span>
<div class="content"> Your Content Here...</div>
</div>

This script supports multi-level nesting. The following example shows a single entry with two branches to show the format of a nested branch:

<div class="container">
<span class="folder"><img src="plus.gif"> The Header Text </span>
<div class="content">

    <div class="container">
    <span class="folder"><img src="plus.gif"> The First Branch </span>
    <div class="content">
          <div class="container">
          <span class="folder"><img src="plus.gif"> The Second Branch </span>
          <div class="content"> Content for the innermost branch...
          </div>
          </div>

    </div>
    </div>

</div>
</div>

You'll notice in both of the examples above, there is no javascript that causes the folders to open or close; that's because the script searches for elements of a certain classname and automatically assigns mouse events. You do not even have to assign an ID to any folder ( unless you want a specific folder opened initially; more on this in the Notes section ). This is why it is important to follow the format given above; if not, the script will generate errors.

Notes

This script only works in standards compliant browsers (IE5+, Netscape6+). Other browsers should simply show the menu with none of the content, but shouldn't generate any errors.
This script does it's "magic" once the page loads by using the window.onload event handler. This isn't a problem unless you use another script that also uses this event; only one will work. The good news is that you can get them all to work. Go here for the explanation on how this is done.
Depending on your application, you may want the tree to appear initially open or closed, just one change to the script will do the trick. Edit the foldertree.js file and find the lines that read:
```
  function FTinit(){
  var tids=document.getElementsByTagName('span');
  for(i=0;i<tids.length;i++)if(tids[i].className=="folder")ids[ids.length]=tids[i];
  for(i=0;i<ids.length;i++)ids[i].onmouseup=setstate;
  //expandall(); // REMOVE THE // FROM THE BIGINNING OF THIS LINE TO HAVE THE TREE EXPANDED INITIALLY.
  }
```
Just remove the two // from the beginning of the line that has the expandall() function and now your foldertree will be opened on pageload.
You'll notice at the top of this page that there are two links; one to expand all the folders and one to collapse all the folders. These links just call 2 included javascript functions to expand or collapse all the folders at once. You use them as you would a normal hyperlink, see the examples below:

<a href="javascript:expandall()">Expand all</a>
<a href="javascript:collapseall()">Collapse all</a>
There are two other functions included in the script called openById() and closeById(). So far, the script lets you have all the folders open or all closed initally. These functions allow you have one or more folders opened or closed initially; useful if you want to have all the folders closed except for one or two individual ones. Here's a quick rundown how to use these commands:
1. Assign a unique ID to all folders you want to have open or closed ( ONLY the folder elements ).
2. Then add either of the following commands at the end of the window.onload event handler. When you do this, you must also pass the folder's element reference:
  
  openById( 'your_id_here' );
  closeById( 'your_id_here' );
  
  Substitute the ID you've assigned instead of your_id_here.
3. You'll need to add one of these for every individual folder element you want to have opened/closed on pageload.
Note that if you have a specific folder expanded on pageload, but it is part of a closed branch, that folder will only be seen if the parent branch is expanded.
Do not use the class names explained earlier anywhere else in your page or you'll get some weird effects or errors. This is because the script hunts down all DIV elements with a classname of "folder", it then sets mouse events to expand/collapse its sister DIV (class name "content"). So, if the format explained earlier isn't followed, the script will generate errors.

One level.

...Another level

...And another

...Yet another

Nothing of interest in here...