The first thing to do is include the appropriate JavaScript and CSS files:

<link rel="stylesheet" type="text/css" media="all" href="tree.css" />
<script type="text/javascript" src="tree.js"></script> 	 	 	

Then, create the HTML for you tree. This is basically a nested set of bullet pointed links. The "tree" class at the top is what the script will look for. Note that you can make a tree node closed to begin with by adding class="closed".

Here's the HTML code that I inserted to create the demo tree above.

<ul class="tree">
  <li><a href="#">item 1</a>
    <ul>
      <li><a href="#">item 1.1</a></li>
      <li class="closed"><a href="#">item 1.2</a>
        <ul>
          <li><a href="#">item 1.2.1</a></li>
          <li><a href="#">item 1.2.2</a></li>
          <li><a href="#">item 1.2.3</a></li>
        </ul>
      </li>
      <li><a href="#">item 1.3</a></li>
    </ul>
  </li>
  <li><a href="#">item 2</a>
    <ul>
      <li><a href="#">item 2.1</a></li>
      <li><a href="#">item 2.2</a></li>
      <li><a href="#">item 2.3</a></li>
    </ul>	
  </li>
</ul> 	 	 	

Your tree is now complete!