Build an XML-based Tree Control with JavaScript : Page 3

Create JavaScript and CSS Files
You'll need to create the JavaScript and CSS files next. The JavaScript file contains the variables and functions to make the tree work in a browser and the CSS stylesheet controls how the browser formats the text in the tree control.

Here's the content of the JavaScript file:

   var openImg = new Image();
   openImg.src = "open.gif";
   var closedImg = new Image();
   closedImg.src = "closed.gif";
   
   function showBranch(branch){
      var objBranch = 
         document.getElementById(branch).style;
      if(objBranch.display=="block")
         objBranch.display="none";
      else
         objBranch.display="block";
      swapFolder('I' + branch);
   }
   
   function swapFolder(img){
      objImg = document.getElementById(img);
      if(objImg.src.indexOf('closed.gif')>-1)
         objImg.src = openImg.src;
      else
         objImg.src = closedImg.src;
   }

Save the completed JavaScript file as xmlTree.js.

Here's the code for the CSS file:

   body{
      font: 10pt Verdana,sans-serif;
      color: navy;
   }
   .trigger{
      cursor: pointer;
      cursor: hand;
      display: block;
   }
   .branch{
      display: none;
      margin-left: 16px;
   }
   a{
      text-decoration: none;
   }
   a:hover{
      text-decoration: underline;
   }

Save the completed CSS file as xmlTree.css.

Previous Page

Next Page

---

• Download The Code for this Article

---