XtremeDocumentStudio
.NET
PDFOne
.NET
XtremeDocumentStudio
(for Java)
PDFOne
(for Java)
XtremeDocumentStudio
Delphi
eDocEngine
VCL
PDFtoolkit
VCL
StarDocs
Web APIs

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.

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.

---o0O0o---

Our .NET Developer Tools
XtremeDocumentStudio .NET

Multi-format document-processing component suite for .NET developers.

PDFOne .NET

A .NET PDF component suite to create, edit, view, print, reorganize, encrypt, annotate, and bookmark PDF documents in .NET applications.

Our Delphi/C++Builder developer tools
XtremeDocumentStudio Delphi

Multi-format document-processing component suite for Delphi/C++Builder developers, covering both VCL and FireMonkey platforms.

eDocEngine VCL

A Delphi/C++Builder component suite for creating documents in over 20 formats and also export reports from popular Delphi reporting tools.

PDFtoolkit VCL

A Delphi/C++Builder component suite to edit, enhance, view, print, merge, split, encrypt, annotate, and bookmark PDF documents.

Our Java developer tools
XtremeDocumentStudio (for Java)

Multi-format document-processing component suite for Java developers.

PDFOne (for Java)

A Java PDF component suite to create, edit, view, print, reorganize, encrypt, annotate, bookmark PDF documents in Java applications.

Our Platform-Agnostic Cloud and On-Premises APIs
StarDocs

Cloud-hosted and On-Premises REST-based document-processing and document-viewing APIs

Privacy | Legal | Feedback | Newsletter | Blog | Resellers © 2002-2017 Gnostice Information Technologies Private Limited. All rights reserved.