tags to hold the root nodes—the nodes that are always visible. I'll use tags to hold the branches and leaves of the tree—the nodes that need to be toggled. Write the following HTML between the tags of the HTML shell:

   <div class="trigger">
      <img src="closed.gif" border="0" id="folder1">
      HTML
   </div>
      <span class="branch" id="branch1">
         <img src="doc.gif">Tags, Tags, Tags<br>
         <img src="doc.gif">Hyperlinks</a><br>
         <img src="doc.gif">Images<br>
         <img src="doc.gif">Tables<br>
         <img src="doc.gif">Forms<br>
      </span>
   <div class="trigger">
      <img src="closed.gif" border="0" id="folder2">
      CSS
   </div>
      <span class="branch" id="branch2">
         <img src="doc.gif">Inline Styles<br>
         <img src="doc.gif">Document Wide Styles<br>
         <img src="doc.gif">External Style Sheets<br>
         <img src="doc.gif">Formatting Text<br>
         <img src="doc.gif">Positioning<br>
      </span>
   <div class="trigger">
      <img src="closed.gif" border="0" id="folder3">
      JavaScript
   </div>
      <span class="branch" id="branch3">
         <img src="doc.gif">The Basics<br>
         <img src="doc.gif">Working with Images<br>
         <img src="doc.gif">Controlling Frames<br>
         <img src="doc.gif">Browser Windows<br>
         <img src="doc.gif">Form Validation<br>
         <img src="doc.gif">Handling Events<br>
      </span>
   <div class="trigger">
      <img src="closed.gif" border="0" id="folder4">
      DHTML
   </div>
      <span class="branch" id="branch4">
         <img src="doc.gif">Object Detection<br>
         <span class="trigger">
            <img src="closed.gif" border="0" id="folder5">
            Animation<br>
         </span>
            <span class="branch" id="branch5">
               <img src="doc.gif">Path Animation<br>
               <img src="doc.gif">
                 Point To Point Animation<br>
            </span>
         <img src="doc.gif">Menus<br>
         <img src="doc.gif">Tabbed User Interface<br>
         <img src="doc.gif">Trees<br>
      </span>

The HTML is not complicated. Each root node contains an image representing a closed folder and some text. Following each root node is a branch whose class attribute is set to "branch." This "hides" the branch. A JavaScript event handler (see following page) adds the functionality to "show" the branch and display an open folder icon. Also note that branch No. 4, includes a child node that is also a trigger. Initially, the child trigger will be hidden but will be clickable when displayed. Finally, I've represented end nodes (leaves) using the doc.gif graphic and some display text which lets users know that they've reached a leaf node rather than another branch. Figure 1 shows how the populated tree looks in IE.

Figure 1: The populated JavaScript tree control in Internet Explorer.

When creating your own trees for Web pages, you'd typically wrap the image and text inside a hyperlink, to take some action when users click an item.

Previous: Preparing the Style Sheet

Next: Activate the Tree with JavaScript

Introduction	Preparing the Style Sheet
Adding the HTML	Activate the Tree with JavaScript

Return to Get Help with DHTML Page

Return to Main Get Help Page