Advanced Search

Poor Man's TreeView Setup JavaScript

/ Published in: JavaScript
Save to your folder(s)
This little javascript will toggle the div object to create collpse/expand effect on web page. Treat it as a poor man's solution for the TreeView.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. function Toggle(node)
  2. {
  3.      // detecting browser type: ie or netscape
  4.      var appName    = navigator.appName
  5.      var isIE       = appName.indexOf( "Microsoft" ) != -1 
  6.      var isNetscape = appName.indexOf( "Netscape" )  != -1
  7.  
  8.      // image and div nodes - The DOM object that ie and netscape
  9.      // created are different so we should recognize this.
  10.      var imgNode
  11.      var divNode
  12.      if ( isIE ) {
  13.           imgNode = node.childNodes[0];
  14.           divNode = node.childNodes[2];
  15.      }
  16.      else if ( isNetscape ) {
  17.           imgNode = node.childNodes.item(0)
  18.           divNode = node.nextSibling
  19.      }
  20.  
  21.      // Toggle display the div object by setting the
  22.      // display property of style from none to block,
  23.      // and vice versa
  24.      if ( divNode.style.display == 'none' ) {
  25.           if ( divNode.childNodes.length > 0 ) {
  26.                imgNode.src = '/images/plus.gif'
  27.           }
  28.           divNode.style.display = 'block'
  29.      }
  30.      else {
  31.           if ( divNode.childNodes.length > 0 ) {
  32.                imgNode.src = '/images/minus.gif'
  33.           }
  34.           divNode.style.display = 'none';
  35.      }
  36. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.