JavascriptToolbox.com Now Available!

Almost all of my javascript code has been moved over to its new home at The Javascript Toolbox. Please go there to find the latest scripts, information, etc. These pages will remain here for a while for historical purposes in case anyone needs a production copy of old code.
DHTML Tree
[Javascript Toolbox]  [Example]  [Source]  [Documentation]
Description:
This code is an extension of the great work done by Stuart Langridge's aqlists. I've re-written his code and added a lot of my own features to make what I feel is the best option for building expanding and collapsing tree structures using DHTML.

What's unique about this approach (and Stuart's) is that this code requires almost no effort for the person designing the site. The entire tree structure is built from a normal <UL> HTML structure. The DHTML loads, finds the structure, and builds a tree out of it, all automatically!

The look and functionality is controlled entirely through CSS, so only newer browsers will be able to see the tree (IE5+, NN6+, Opera, etc). However, older browsers like Netscape4 will still see your entire data structure as a plain Unordered List, so it degrades nicely!

See the documentation for details on exactly how to use this in your page, and view the source of this page as an example.

Example:
View the source of this document to see that the tree below exists in the HTML document as a plain unordered list. The only thing done in the code is to set the CLASS of the UL. Also, the class of a couple of sub-listings were set to "liOpen" to show how the tree can be initialized to a state when loaded. That's it! It couldn't be simpler.
This is the directory listing for an installation of CalendarScript:
Expand All    Collapse All    Expand and find login.html
  • cache/
    • delete_me.txt
  • calendars/
    • _template/
      • config.txt
      • config.txt.lock
      • events.id
      • events.lock
      • events.properties
      • events.txt
      • schedule.id
      • schedule.lock
      • schedule.properties
      • schedule.txt
    • default/
      • config.txt
      • config.txt.lock
      • events.id
      • events.lock
      • events.properties
      • events.txt
      • schedule.id
      • schedule.lock
      • schedule.properties
      • schedule.txt
  • calendars.id
  • calendars.lock
  • calendars.properties
  • calendars.txt
  • command_list.txt
  • config.txt
  • config.txt.lock
  • lib/
    • CGISession.inc
    • ConfigFile.pm
    • DBFile.pm
    • DBFileUtil.inc
    • Date.inc
    • Event.inc
    • HTML.pm
    • SimpleDateFormat.pm
    • TimeLocal.inc
    • User.pm
    • asp.inc
    • calendars.inc
    • flock.inc
  • permissions.id
  • permissions.lock
  • permissions.properties
  • permissions.txt
  • permissions_list.txt
  • plugins/
    • TestPlugin/
      • before_commands.pl
      • command_list.txt
      • plugin_test.html
      • readme.txt
    • command_list.txt
    • permissions_list.txt
    • plugin_files.txt
    • plugins.txt
  • session/
    • delete_me.txt
  • ssi.txt
  • templates/
    • admin/
      • English/
        • AnchorPosition.js
        • CalendarPopup.js
        • ColorPicker.js
        • GetDate.js
        • PopupWindow.js
        • TimeValidations.js
        • _command_list.html
        • _footer.html
        • _header.html
        • add_edit_calendar.html
        • add_edit_event.html
        • add_edit_field.html
        • add_edit_user.html
        • admin_interface.html
        • approve.html
        • calendar_settings.html
        • change_password.html
        • customize_event_fields.html
        • customize_user_fields.html
        • dates.js
        • edit_delete_events.html
        • edit_delete_users.html
        • error.html
        • feedback.html
        • import_events.html
        • login.html
        • main.html
        • manage_calendars.html
        • messages.txt
        • permissions.html
        • permissions_error.html
        • plugins.html
        • schedule_event_non_recur.html
        • schedule_event_recurring.html
        • select_calendar.html
        • selectbox.js
        • setup1.html
        • setup2.html
        • setup3.html
        • setup_complete.html
        • styles.css
        • tabnext.js
        • template.html
        • template_preferences.html
        • util.js
        • validations.js
    • calendars/
      • default/
        • default.html
        • error.html
        • login.html
        • preferences.pl
        • preferences.txt
        • ssi.html
        • styles.css
      • oldstyle/
        • _view.html
        • day.html
        • default.html
        • error.html
        • event_detail.html
        • login.html
        • search.html
        • ssi.htmlv
        • styles_scripts.html
      • simple/
        • default.html
        • error.html
        • login.html
        • ssi.html
  • users.id
  • users.lock
  • users.properties
  • users.txt



For future consideration: I want to add cookie support, so the state of the tree remains the same for each unique tree (with a given ID). This would allow you to leave a page with a tree and come back later and have it expanded to the same place as before. If I get time...