Create a Collapsible Tree in IE5 Using SrcElement

Browsers Targeted: Internet Explorer 5

Tree structures appear quite often over the 'Net, and they are becoming especially prominent in the face of the emergence of XML. Fortunately, tree structures are remarkably simple to create, using a combination of list elements and spans. In IE5, you can also take advantage of the srcElement property to simplify making a collapsible tree:

 
<script language="VBScript">
  function updateTree()
    set src=window.event.srcElement
    select case src.nodeName
      case "SPAN"
        set span=src
        set li=span.parentNode  
      case "LI"
        set li=src
        set span=li.childNodes(0)
      case else
        exit function
    end select
    set ol=li.getElementsByTagName("OL")(0)
    if ol is nothing then
      exit function
    else
      if ol.style.display="block" then
        ol.style.display="none"
      else
        ol.style.display="block"
      end if
    end if
  end function
</script>
<style>
ol {display:none;}

</style>
<ol style="list-style-type:upper-roman;display:block;cursor:hand;"

 onclick="updateTree()">
    <li><span>Chapter 1</span>
      <ol style="list-style-type:upper-alpha">
        <li><span>Section 1</span>
           <ol style="list-style-type:lower-roman">
              <li><span>Sub-section 1</span>
                 <ol style="list-style-type:lower-alpha">
                    <li><span>Paragraph 1</span></li>
                    <li><span>Paragraph 2</span></li>
                    <li><span>Paragraph 3</span></li>
               </ol>
            </li>
              <li><span>Sub-section 2</span>
                 <ol style="list-style-type:lower-alpha">
                    <li><span>Paragraph 1</span></li>
                    <li><span>Paragraph 2</span></li>
                    <li><span>Paragraph 3</span></li>
               </ol>
            </li>
              <li><span>Sub-section 3</span>
                 <ol style="list-style-type:lower-alpha">
                    <li><span>Paragraph 1</span></li>
                    <li><span>Paragraph 2</span></li>
                    <li><span>Paragraph 3</span></li>
               </ol>
            </li>
         </ol>
        </li>
        <li><span>Section 2</span>
           <ol style="list-style-type:lower-roman">
              <li><span>Sub-section 1</span>
                 <ol style="list-style-type:lower-alpha">
                    <li><span>Paragraph 1</span></li>
                    <li><span>Paragraph 2</span></li>
                    <li><span>Paragraph 3</span></li>
               </ol>
            </li>
              <li><span>Sub-section 2 </span>
                 <ol style="list-style-type:lower-alpha">
                    <li><span>Paragraph 1</span></li>
                    <li><span>Paragraph 2</span></li>
                    <li><span>Paragraph 3</span></li>
               </ol>
            </li>
              <li><span>Sub-section 3</span>
                 <ol style="list-style-type:lower-alpha">
                    <li><span>Paragraph 1</span></li>
                    <li><span>Paragraph 2</span></li>
                    <li><span>Paragraph 3</span></li>
               </ol>
           </li>
         </ol>
        </li>
    </ol>
  </li>
</ol>