Logo
doctype [?]
[strict] [loose] [none]

DHTML Expandable and Collapsible Tree


Using Unobtrusive Javascript techniques, this tree control presents users of modern, javascript-enabled browsers with an expanding and collapsing tree structure, while preserving the tree structure in plain HTML format for those browsers with less capability.

What's unique about this approach is that this control requires no virtually javascript knowledge to implement. 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.

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 Tree Structure

View the source of this page to see that there is no Javascript to be found! The tree structure below is built entirely from HTML, and the tree control turns that into the tree structure.

Below is a directory listing for an installation of CalendarScript.

Built-in features of this tree control allow you to easily Expand All Nodes, Collapse All Nodes, and Expand to a certain location (in this example, expand to 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