Posted By

chengkai on 07/20/06

Tagged

javascript

Versions (?)

Last Edited at 07/20/06 02:37pm

Statistics

Viewed 991 times

Favorited by 0 user(s)

Related snippets

Poor Man's TreeView Setup JavaScript

/ Published in: JavaScript

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.

Highlighted TextExpand

function Toggle(node)
{
     // detecting browser type: ie or netscape
     var appName    = navigator.appName
     var isIE       = appName.indexOf( "Microsoft" ) != -1 
     var isNetscape = appName.indexOf( "Netscape" )  != -1
     
     // image and div nodes - The DOM object that ie and netscape
     // created are different so we should recognize this.
     var imgNode
     var divNode
     if ( isIE ) {
          imgNode = node.childNodes[0];
          divNode = node.childNodes[2];
     }
     else if ( isNetscape ) {
          imgNode = node.childNodes.item(0)
          divNode = node.nextSibling
     }

// Toggle display the div object by setting the
     // display property of style from none to block,
     // and vice versa
     if ( divNode.style.display == 'none' ) {
          if ( divNode.childNodes.length > 0 ) {
               imgNode.src = '/images/plus.gif'
          }
          divNode.style.display = 'block'
     }
     else {
          if ( divNode.childNodes.length > 0 ) {
               imgNode.src = '/images/minus.gif'
          }
          divNode.style.display = 'none';
     }
}

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.