Home » Newsletter » October 2010

Making An Interactive TreeView Control From An HTML Nested List

Create a list, give it an ID, and set this event handler on the list.

By V. Subhash

I was preparing for a presentation and I did not want use PowerPoint. The presentation was about HTML. So, what better way to demonstrate HTML than using it as the PowerPoint replacement. Here is what I did.

First, I created a nested HTML list and gave it an ID.

<ul id="LinkedList1" class="LinkedList">
  <li>History of WWW
    <ul>
      <li>Arpanet - Packets - 1969</li>
      <li>TCP/IP - Vinton Cerf - 1974</li>
      <li>WorldWideWeb (Internet and program) - Tim Berners Lee - 1991</li>
…

Then, I added this style so that the list tree is collapsed by default.

<style type="text/css">
  ul.LinkedList { display: block; }
  ul.LinkedList ul { display: none; } 
  .HandCursorStyle { cursor: pointer; cursor: hand; }  /* For IE */
</style>

If you want the list to be expanded by default, say for JavaScript-disabled clients, then you can comment out the second-line.

<style type="text/css">
  ul.LinkedList { display: block; }
  /* ul.LinkedList ul { display: none; } */
  .HandCursorStyle { cursor: pointer; cursor: hand; }  /* For IE */
</style>

Then, I add the click event handler.

  <script type="text/JavaScript">
    // Add this to the onload event of the BODY element
    function addEvents() {
      activateTree(document.getElementById("LinkedList1"));
    }

    // This function traverses the list and add links 
    // to nested list items
    function activateTree(oList) {
      // Collapse the tree
      for (var i=0; i < oList.getElementsByTagName("ul").length; i++) {
        oList.getElementsByTagName("ul")[i].style.display="none";            
      }                                                                  
      // Add the click-event handler to the list items
      if (oList.addEventListener) {
        oList.addEventListener("click", toggleBranch, false);
      } else if (oList.attachEvent) { // For IE
        oList.attachEvent("onclick", toggleBranch);
      }
      // Make the nested items look like links
      addLinksToBranches(oList);
    }

    // This is the click-event handler
    function toggleBranch(event) {
      var oBranch, cSubBranches;
      if (event.target) {
        oBranch = event.target;
      } else if (event.srcElement) { // For IE
        oBranch = event.srcElement;
      }
      cSubBranches = oBranch.getElementsByTagName("ul");
      if (cSubBranches.length > 0) {
        if (cSubBranches[0].style.display == "block") {
          cSubBranches[0].style.display = "none";
        } else {
          cSubBranches[0].style.display = "block";
        }
      }
    }

    // This function makes nested list items look like links
    function addLinksToBranches(oList) {
      var cBranches = oList.getElementsByTagName("li");
      var i, n, cSubBranches;
      if (cBranches.length > 0) {
        for (i=0, n = cBranches.length; i < n; i++) {
          cSubBranches = cBranches[i].getElementsByTagName("ul");
          if (cSubBranches.length > 0) {
            addLinksToBranches(cSubBranches[0]);
            cBranches[i].className = "HandCursorStyle";
            cBranches[i].style.color = "blue";
            cSubBranches[0].style.color = "black";
            cSubBranches[0].style.cursor = "auto";
          }
        }
      }
    }
  </script>
</head>
<body onload="addEvents();">

Demo (Click The Faux Links In The List)

Here is how it works. The blue-colored text are not hyperlinks. They hide nested branches. Click the blue-colored text to expand the hidden branches.

History of WWW
- Arpanet - Packets - 1969
- TCP/IP - Vinton Cerf - 1974
- WorldWideWeb (Internet and program) - Tim Berners Lee - 1991
- Public Domain WWW source code - 1993
- NCSA Mosaic released - 1993
- Opera released - 1994
- Marc Anderseen (formerly NCSA) and Jim Clark release Netscape - 1994
- IE from Microsoft (based on Mosaic)
  - DHTML
  - ActiveX
- W3C at MIT (CERN, NCSA, EU)
- W3C Recommendations
- Mozilla Foundation
HTML4 page structure
- Comments
- Tags
  - Head
    - title
    - meta
    - link
    - script
  - Body
    - inline tags - b (bold), i (italic), ~~s (strikeout)~~, u (underline), code (fixed-width), span, a (anchor - hyperlink)
    - block tags - div (box), table/tr/td (table), ul/ol/li (list)
    - other tags - script, noscript
- JavaScript
  - IE (see MSDN)
  - Mozilla (see MDC)
  - Ajax
- CSS2
  - Mozilla (see W3C reference)
  - IE (see MSDN for filter style)
  - Accessibility
Doctype - HTML (Transitional/Strict) or XHTML
How Web Pages Work
- HTTP request
- HTTP response
Web Applications - Server-side scripting
- CGI
- ASP, JSP, PHP
- ASP.NET
Browser engines
- IE
- Mozilla
- KHTML/Webkit
Mobile browsers
- WAP - very old phones
- XHTML - cheap phones
- HTML, XHTML, HTML5 - new/expensive phones
HTML 5 and CSS3 - What's New

Example HTML Source

Here is the test page source code. It has been tested OK in IE (v5.5 to v9 Beta) and recent versions of (Google Chrome-based) Comodo Dragon, Firefox and Opera.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>HTML Course</title>

// This function traverses the list and add links 
    // to nested list items
    function activateTree(oList) {
      // Collapse the tree
      for (var i=0; i < oList.getElementsByTagName("ul").length; i++) {
        oList.getElementsByTagName("ul")[i].style.display="none";            
      }                                                                  
      // Add the click-event handler to the list items
      if (oList.addEventListener) {
        oList.addEventListener("click", toggleBranch, false);
      } else if (oList.attachEvent) { // For IE
        oList.attachEvent("onclick", toggleBranch);
      }
      // Make the nested items look like links
      addLinksToBranches(oList);
    }

// This is the click-event handler
    function toggleBranch(event) {
      var oBranch, cSubBranches;
      if (event.target) {
        oBranch = event.target;
      } else if (event.srcElement) { // For IE
        oBranch = event.srcElement;
      }
      cSubBranches = oBranch.getElementsByTagName("ul");
      if (cSubBranches.length > 0) {
        if (cSubBranches[0].style.display == "block") {
          cSubBranches[0].style.display = "none";
        } else {
          cSubBranches[0].style.display = "block";
        }
      }
    }

// This function makes nested list items look like links
    function addLinksToBranches(oList) {
      var cBranches = oList.getElementsByTagName("li");
      var i, n, cSubBranches;
      if (cBranches.length > 0) {
        for (i=0, n = cBranches.length; i < n; i++) {
          cSubBranches = cBranches[i].getElementsByTagName("ul");
          if (cSubBranches.length > 0) {
            addLinksToBranches(cSubBranches[0]);
            cBranches[i].className = "HandCursorStyle";
            cBranches[i].style.color = "blue";
            cSubBranches[0].style.color = "black";
            cSubBranches[0].style.cursor = "auto";
          }
        }
      }
    }
  </script>
</head>

<body onload="addEvents();">
<ul id="LinkedList1" class="LinkedList">
  <li>History of WWW
    <ul>
      <li>Arpanet - Packets - 1969</li>
      <li>TCP/IP - Vinton Cerf - 1974</li>
      <li>WorldWideWeb (Internet and program) - Tim Berners Lee - 1991</li>
      <li>Public Domain WWW source code - 1993</li>
      <li>NCSA Mosaic released - 1993</li>
      <li>Opera released - 1994</li>
      <li>Marc Anderseen (formerly NCSA) and Jim Clark  release Netscape - 1994</li>
      <li>IE from Microsoft (based on Mosaic)
        <ul>
          <li>DHTML</li>
          <li>ActiveX</li>
        </ul>
      </li>
      <li>W3C at MIT (CERN, NCSA, EU)</li>
      <li>W3C Recommendations</li>
      <li>Mozilla Foundation</li>
    </ul>
  </li>
  <li>HTML4 page structure
    <ul>
      <li>Comments</li>
      <li>Tags
        <ul> 
          <li>Head
            <ul>
              <li>title</li>
              <li>meta</li>
              <li>link</li>
              <li>script</li>
            </ul> 
          </li>
          <li>Body
            <ul>
              <li>inline tags - <b>b (bold)</b>, <i>i (italic)</i>, <s>s (strikeout)</s>,
                <u>u (underline)</u>, <code>code (fixed-width)</code>, 
                <span style="background-color: lime; ">span</span>, 
                <a href="http://www.gnostice.com/">a (anchor - hyperlink)</a></li>
              <li>block tags - div (box), table/tr/td (table), ul/ol/li (list)</li>
              <li>other tags - script, noscript</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>JavaScript
        <ul>
          <li>IE (see MSDN)</li>
          <li>Mozilla (see MDC)</li>
          <li>Ajax</li>
        </ul>
      </li>
      <li>CSS2
        <ul>
          <li>Mozilla (see W3C reference)</li>
          <li>IE (see MSDN for filter style)</li>
          <li>Accessibility</li>
        </ul>
      </li>  
    </ul>
  </li>
  <li>Doctype - HTML (Transitional/Strict) or XHTML </li>
  <li>How Web Pages Work
    <ul>
      <li>HTTP request</li>
      <li>HTTP response</li>
    </ul>
  </li>    
  <li>Web Applications - Server-side scripting
     <ul>
       <li>CGI</li>
       <li>ASP, JSP, PHP</li>
       <li>ASP.NET</li>
     </ul>
  </li>
  <li>Browser engines
    <ul>
      <li>IE</li>
      <li>Mozilla</li>
      <li>KHTML/Webkit</li>
    </ul>
  </li>
  <li>Mobile browsers
    <ul>
      <li>WAP - very old phones</li>
      <li>XHTML - cheap phones</li>
      <li>HTML, XHTML, HTML5 - new/expensive phones</li>
    </ul>
  </li>
  <li>HTML 5 and CSS3 - What's New</li>
</ul>

</body>
</html>

---o0O0o---

Making An Interactive TreeView Control From An HTML Nested List

Create a list, give it an ID, and set this event handler on the list.

By V. Subhash

Demo (Click The Faux Links In The List)

Example HTML Source

Gnostice Document Studio .NET

PDFOne .NET

Gnostice Document Studio Delphi

eDocEngine VCL

PDFtoolkit VCL

Gnostice Document Studio Java

PDFOne (for Java)

StarDocs