Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: Visual Basic, Web
Expertise: Advanced
Mar 6, 2000

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>
Kurt Cagle
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap