Advanced Search

Return to Snippet

Revision: 598
at July 20, 2006 14:37 by chengkai
Initial Code 
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';
     }
}
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
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.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Poor Man's TreeView Setup JavaScript

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
javascript

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript