SimpleTree Plugin is intended for displaying tree structures.
 

SimpleTree key features:

AJAX upload method:
If there is a need in AJAX upload, then place UL with "ajax" class and tag LI with URL for a loadable item.

example:
<li><span class="text">Tree Node 1-1</span>
     <ul class="ajax">
          <li>{url:tree_load.php?tree_id=1}</li>
     </ul>
</li>

Example 1.

This example demonstrates this script (all values set by default)

$('#tree1').simpleTree();

 Example 2.

This example demonstrates animation.

$('#tree2').simpleTree({animate: true});
  • Tree Root
    • Tree Node 1
      • Tree Node 1-1
        • {url:tree_load.php?tree_id=1}
    • Tree Node 2
      • Tree Node 2-1
        • Tree Node 2-1-1
        • Tree Node 2-1-2
        • Tree Node 2-1-3
        • Tree Node 2-1-4
          • {url:tree_load.php?tree_id=1}
      • Tree Node 2-2
        • Tree Node 2-2-1
      • Tree Node 2-3
        • Tree Node 2-3-1
          • Tree Node 2-3-1-1
          • Tree Node 2-3-1-2
          • Tree Node 2-3-1-3
            • Tree Node 2-3-1-3-1
          • Tree Node 2-3-1-4
          • Tree Node 2-3-1-5
          • Tree Node 2-3-1-6
            • Tree Node 2-3-1-6-1
          • Tree Node 2-3-1-7
          • Tree Node 2-3-1-8
          • Tree Node 2-3-1-9
            • Tree Node 2-3-1-9-1
    • Tree Node 3
      • Tree Node 3-1
        • Tree Node 3-1-1
      • Tree Node 3-2
        • Tree Node 3-2-1
      • Tree Node 3-3
        • Tree Node 3-3-1
  • Tree Root
    • Tree Node 1
      • Tree Node 1-1
        • {url:tree_load.php?tree_id=1}
    • Tree Node 2
      • Tree Node 2-1
        • Tree Node 2-1-1
        • Tree Node 2-1-2
        • Tree Node 2-1-3
        • Tree Node 2-1-4
          • {url:tree_load.php?tree_id=1}
      • Tree Node 2-2
        • Tree Node 2-2-1
      • Tree Node 2-3
        • Tree Node 2-3-1
          • Tree Node 2-3-1-1
          • Tree Node 2-3-1-2
          • Tree Node 2-3-1-3
            • Tree Node 2-3-1-3-1
          • Tree Node 2-3-1-4
          • Tree Node 2-3-1-5
          • Tree Node 2-3-1-6
            • Tree Node 2-3-1-6-1
          • Tree Node 2-3-1-7
          • Tree Node 2-3-1-8
          • Tree Node 2-3-1-9
            • Tree Node 2-3-1-9-1
    • Tree Node 3
      • Tree Node 3-1
        • Tree Node 3-1-1
      • Tree Node 3-2
        • Tree Node 3-2-1
      • Tree Node 3-3
        • Tree Node 3-3-1
Example 3.

This example shows animation and branches collapse.

$('#tree3').simpleTree({animate: true,autoclose:true});

 Example 4.
Example of using expanded branches loaded prior to menu is generated. Just assign a class for tag LI, i.e. <li class="open">

$('#tree3').simpleTree({animate: true,autoclose:true});
  • Tree Root
    • Tree Node 1
      • Tree Node 1-1
        • {url:tree_load.php?tree_id=1}
    • Tree Node 2
      • Tree Node 2-1
        • Tree Node 2-1-1
        • Tree Node 2-1-2
        • Tree Node 2-1-3
        • Tree Node 2-1-4
          • {url:tree_load.php?tree_id=1}
      • Tree Node 2-2
        • Tree Node 2-2-1
      • Tree Node 2-3
        • Tree Node 2-3-1
          • Tree Node 2-3-1-1
          • Tree Node 2-3-1-2
          • Tree Node 2-3-1-3
            • Tree Node 2-3-1-3-1
          • Tree Node 2-3-1-4
          • Tree Node 2-3-1-5
          • Tree Node 2-3-1-6
            • Tree Node 2-3-1-6-1
          • Tree Node 2-3-1-7
          • Tree Node 2-3-1-8
          • Tree Node 2-3-1-9
            • Tree Node 2-3-1-9-1
    • Tree Node 3
      • Tree Node 3-1
        • Tree Node 3-1-1
      • Tree Node 3-2
        • Tree Node 3-2-1
      • Tree Node 3-3
        • Tree Node 3-3-1
  • Tree Root
    • Tree Node 1
      • Tree Node 1-1
        • {url:tree_load.php?tree_id=1}
    • Tree Node 2
      • Tree Node 2-1
        • Tree Node 2-1-1
        • Tree Node 2-1-2
        • Tree Node 2-1-3
        • Tree Node 2-1-4
          • {url:tree_load.php?tree_id=1}
      • Tree Node 2-2
        • Tree Node 2-2-1
      • Tree Node 2-3
        • Tree Node 2-3-1
          • Tree Node 2-3-1-1
          • Tree Node 2-3-1-2
          • Tree Node 2-3-1-3
            • Tree Node 2-3-1-3-1
          • Tree Node 2-3-1-4
          • Tree Node 2-3-1-5
          • Tree Node 2-3-1-6
            • Tree Node 2-3-1-6-1
          • Tree Node 2-3-1-7
          • Tree Node 2-3-1-8
          • Tree Node 2-3-1-9
            • Tree Node 2-3-1-9-1
    • Tree Node 3
      • Tree Node 3-1
        • Tree Node 3-1-1
      • Tree Node 3-2
        • Tree Node 3-2-1
      • Tree Node 3-3
        • Tree Node 3-3-1