Tree Menu in Dreamweaver CS3

Question

Hello I am having difficulty installing the following example:
1. http://code.stephenmorley.org/javascript/collapsible-lists/
In the section 'Using Collapsible Lists' how and where do I add the following lines:
CollapsibleLists.apply();
CollapsibleLists.applyTo(document.getElementById('newList'));
Thanks, I presume this to be all I need to make this work.

Answer 1

As with most widgets, there are three parts to make them work, namely
markup (HTML)
styling (CSS)
script (JS)
Markup
<ul class="collapsibleList">
  <li>
  Parent item
  <ul>
  <li>Child item</li>
  <li>Child item</li>
  </ul>
  </li>
  <li>
  Parent item
  <ul>
  <li>Child item</li>
  <li>Child item</li>
  </ul>
  </li>
</ul>
Styling
.collapsibleList li{
  list-style-image:url('button.png');
  cursor:auto;
li.collapsibleListOpen{
  list-style-image:url('button-open.png');
  cursor:pointer;
li.collapsibleListClosed{
  list-style-image:url('button-closed.png');
  cursor:pointer;
Script
<script type="text/javascript" src="CollapsibleLists.js"></script>
However, the link to the script is a passive one that needs to be aroused with a trigger. We call this trigger a Constructor. The Constructor creates an instance of the widget using
<script>CollapsibleLists.apply();</script>
or more specifically targeting an element with an ID of 'newList'
<script>CollapsibleLists.applyTo(document.getElementById('newList'));</script>
CSS is placed in the HEAD element
HTML is placed in the BODY element
JS can be placed anywhere within your document. However, because it takes time to load the scripts and you want the user to experience fast loading times, I tend to place the scripts at the bottom of the document, just above the closing BODY tag. Many others tend to place the scripts following the CSS in the HEAD element.