jQuery Treeview Plugin 1.4 Demo

Note (Sept 19th, 08): Dynamic Drive specific version of original main demo page.

Demo #1:

• Item 1
  • Item 1.0
    • Item 1.0.0
  • Item 1.1
  • Item 1.2
    • Item 1.2.0
      • Item 1.2.0.0
      • Item 1.2.0.1
      • Item 1.2.0.2
    • Item 1.2.1
      • Item 1.2.1.0
    • Item 1.2.2
      • Item 1.2.2.0
      • Item 1.2.2.1
      • Item 1.2.2.2
• Item 2
  • Item 2.0
    • Item 2.0.0
      • Item 2.0.0.0
      • Item 2.0.0.1
  • Item 2.1
    • Item 2.1.0
      • Item 2.1.0.0
    • Item 2.1.1
      • Item 2.1.1.0
      • Item 2.1.1.1
      • Item 2.1.1.2
    • Item 2.1.2
      • Item 2.1.2.0
      • Item 2.1.2.1
      • Item 2.1.2.2
• Item 3
  • Item 3.0
    • Item 3.0.0
    • Item 3.0.1
      • Item 3.0.1.0
      • Item 3.0.1.1
    • Item 3.0.2
      • Item 3.0.2.0
      • Item 3.0.2.1
      • Item 3.0.2.2

Notes:

• All nodes collapsed explicitly by default, though overwritten by persistence feature below.
• Only one node allowed open at any time.
• Animation disabled..
• "Location" persistence enabled, causing the branch with an "href" value matching that of the current page (location.href) to be expanded by default. In the demo above, that is "Item 1.0.0".

Demo #2:

Click here to add a New Folder node to the end of the existing tree

• Folder 1
  • Item 1.1
• Folder 2
  • Subfolder 2.1
    • File 2.1.1
    • File 2.1.2
  • File 2.2
• Folder 3 (closed at start)
  • File 3.1
• File 4

Notes:

• No Nodes collapsed explicitly. "Folder 3" is manually closed then by giving its LI element a "closed" CSS class.
• Animation enabled, speed is "normal".
• "Cookie" persistence enabled, causing the current tree state to be persisted.
• Dynamically adding a sub tree to the existing tree demonsrated.

Demo #3:

• Item 1
  • Item 1.0
    • Item 1.0.0
  • Item 1.1
  • Item 1.2
    • Item 1.2.0
      • Item 1.2.0.0
      • Item 1.2.0.1
      • Item 1.2.0.2
    • Item 1.2.1
      • Item 1.2.1.0
    • Item 1.2.2
      • Item 1.2.2.0
      • Item 1.2.2.1
      • Item 1.2.2.2
• Item 2
  • Item 2.0
    • Item 2.0.0
      • Item 2.0.0.0
      • Item 2.0.0.1
  • Item 2.1
    • Item 2.1.0
      • Item 2.1.0.0
    • Item 2.1.1
      • Item 2.1.1.0
      • Item 2.1.1.1
      • Item 2.1.1.2
    • Item 2.1.2
      • Item 2.1.2.0
      • Item 2.1.2.1
      • Item 2.1.2.2
• Item 3
  • Item 3.0
    • Item 3.0.0
    • Item 3.0.1
      • Item 3.0.1.0
      • Item 3.0.1.1
    • Item 3.0.2
      • Item 3.0.2.0
      • Item 3.0.2.1
      • Item 3.0.2.2

Notes:

• All nodes collapsed explicitly by default.
• Animation enabled, speed is "fast".
• Tree state persistence off.
• "toggle" function defined, fired each time a folder branch is toggled.

Other demos

• Large Tree Demo
• Prerendered Large Tree Demo
• Async Tree Demo
• Simple Tree Demo, famfamfam theme (no lines)