// JavaScript Document
<script>
function toggle(toggleId, e)
{
 if (!e) {
  e = window.event;
 }
 if (!document.getElementById) {
  return false;
 }
 var body = document.getElementById(toggleId);
 if (!body) {
  return false;
 } 
 var im = toggleId + "_toggle";
 if (body.style.display == 'none') {
  body.style.display = 'block';
  if (document.images[im]) {
   document.images[im].src = "close.png";
  }
 } else {
  body.style.display = 'none';
  if (document.images[im]) {
   document.images[im].src = "open.png";
  }
 }
 if (e) {
  // Stop the event from propagating, which
  // would cause the regular HREF link to
  // be followed, ruining our hard work.
  e.cancelBubble = true;
  if (e.stopPropagation) {
   e.stopPropagation();
  }
 }
}

</script>
</head>

<body>
<h1>Collapsible Outline Example</h1>
<div onClick="toggle('one', event)">
<img src="open.png" name="one_toggle">
A. The first heading.
</div>
<div id="one" style="display:none;">
<div onClick="toggle('one_a', event)">
  <img src="open.png" name="one_a_toggle">

1. The first entry under the first heading.
</div>
<div id="one_a" style="display:none;">
    a. An entry with no children.<br>
    b. An entry with no children.<br>
    c. An entry with no children.<br>
</div>
</div>
<div onClick="toggle('two', event)">
<img src="open.png" name="two_toggle">
B. The second heading.
</div>
<div id="two" style="display:none;">
<div onClick="toggle('two_a', event)">

  <img src="open.png" name="two_a_toggle">
1. The first entry under the second heading.
</div>
<div id="two_a" style="display:none;">
    a. An entry with no children.<br>
    b. An entry with no children.<br>
    c. An entry with no children.<br>
</div>
</div>
</body>