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.


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.