Ajax Code Examples | Free Ajax Scripts | Ajax Downloads - Contact: Static list based folder tree

Main Menu

Search

Change Language

Ajax Downloads Home

Free AJAX Scripts by Freeajaxscripts.net

Static list based folder tree - AJAX Script

This is a list based folder tree. What you have to do is to create a <UL><LI> list. The script will then create the tree based on this list. The script uses cookies to remember state of nodes. It also includes functions for expanding/collapsing all nodes.

Configuration:

Building a tree

The menu is HTML based. You create the tree by building a nested <UL><LI> list. Example:
<ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">
  <li><a href="http://freeajaxscripts.net/#">Main item</a>
    <ul>
      <li><a href="http://freeajaxscripts.net/#">Sub menu item</a>
        <ul>
          <li><a href="http://freeajaxscripts.net/#">Sub menu item</a>
            <ul>
              <li class="dhtmlgoodies_sheet.gif"><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
              <li class="dhtmlgoodies_sheet.gif"><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
              <li class="dhtmlgoodies_sheet.gif"><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
              <li class="dhtmlgoodies_sheet.gif"><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
            </ul>
          </li>
          <li class="dhtmlgoodies_sheet.gif"><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
          <li class="dhtmlgoodies_sheet.gif"><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
          <li class="dhtmlgoodies_sheet.gif"><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
          <li class="dhtmlgoodies_sheet.gif"><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
        </ul>
      </li>
      <li><a href="http://freeajaxscripts.net/#">Sub menu item</a>
        <ul>
          <li><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
          <li><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
          <li><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
          <li><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
        </ul>
      </li>
      <li><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
      <li><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
      <li><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
    </ul>
  </li>
  <li><a href="http://freeajaxscripts.net/#">Main item</a></li>
  <li><a href="http://freeajaxscripts.net/#">Main item</a>
    <ul>
      <li><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
      <li><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
    </ul>
  </li>
  <li><a href="http://freeajaxscripts.net/#">Main item</a>
    <ul>
      <li class="dhtmlgoodies_sheet.gif"><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
      <li><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
      <li class="dhtmlgoodies_sheet.gif"><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
      <li><a href="http://freeajaxscripts.net/#">Sub menu item</a></li>
    </ul>
  </li>
</ul>

It's important that you give your tree(s) an ID. In the code above, you will see that I have given it the id dhtmlgoodies_tree. You should also notice that the tree need to be assigned to the CSS class dhtmlgoodies_tree. Example:

Javascript configuration

You have to create a reference to your tree(s) by use of Javascript. This is done by creating an array of the ID(s) of your trees. Example:

var idOfFolderTrees = ['dhtmlgoodies_tree','dhtmlgoodies_tree2'];

In the demo, I have two folder trees. The id of the first one is dhtmlgoodies_tree while my second tree got the id dhtmlgoodies_tree2. You will find the ID in the main <UL> tag. Example: <ul id="dhtmlgoodies_tree">

You will find this array code at the top of the <SCRIPT type="text/javascript"> section.