Advanced Search

toggle / showhide with YUI javascript library

/ Published in: JavaScript
Save to your folder(s)
For this snippet you need the files: yahoo-dom-event.js and animation-min.js from the Yahoo User Interface Library (version 2.4.1).

To use this snippet add a class "toggle" to a link which should toggle the effect. To this link add a rel attribute. This attribute contains: id of object to toggle, animation type, animation duration.

Toggle element #1

This will toggle the div with id "example1", the effect used will be "fade" and it will take "20" frames.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. var Dom = YAHOO.util.Dom;
  2. var Event = YAHOO.util.Event;
  3. var $ = function(id) {
  4.       return document.getElementById(id);
  5. } 
  6. //++++++++++++++++++++++++++++++++++++
  7. // YUI TOGGLE
  8. // 1/22/2008 - Edwart Visser & AW
  9. //
  10. // toggle the visibility
  11. //
  12. // REQUIRES: yahoo-dom-event.js
  13. // OPTIONAL: animation-min.js
  14. //
  15. //++++++++++++++++++++++++++++++++++++
  16. YAHOO.namespace("lutsr");
  17.  
  18. YAHOO.lutsr.doToggle = {
  19. 	init : function() {
  20. 		this.toggleLinks = Dom.getElementsByClassName("toggle");
  21. 		for(var i=0; i<this.toggleLinks.length; i++) {
  22. 			  Event.addListener(this.toggleLinks[i],"click",this.animateElements,this);
  23. 		}
  24. 	},
  25. 	toggleElements : function(e,controlNode,refEl) {
  26. 		if(controlNode && refEl) {
  27. 			if(Dom.hasClass(refEl,"show")) {
  28. 				Dom.removeClass(controlNode,"selected");
  29. 				Dom.removeClass(refEl,"show");
  30. 			} else {
  31. 				Dom.addClass(controlNode,"selected");
  32. 				Dom.addClass(refEl,"show");
  33. 			}
  34. 		}
  35. 		// to disable control node's default behaviour
  36. 		return false;
  37. 	},
  38. 	animateElements : function(e,obj) {
  39. 		// obj = javascript toggle object
  40. 		// this = link clicked
  41. 		Event.preventDefault(e);
  42.  
  43. 		if(this.rel) {
  44. 			  controlNode = this;
  45. 		}
  46. 		if(typeof(controlNode) == "string") {
  47. 			  controlNode = Dom.get(controlNode);
  48. 		}
  49.  
  50. 		// objParameters
  51. 		// [0] = object id
  52. 		// [1] = animation type (fade, slide)
  53. 		// [2] = animation duration (seconds)
  54. 		var linkClicked = this;
  55. 		var objParameters = controlNode.rel.split(",");
  56. 		var refEl = Dom.get(objParameters[0]);
  57. 		var objStatus = Dom.hasClass(refEl,"show"); // if true, object is shown
  58.  
  59. 		switchClasses = function() {
  60. 			obj.toggleOtherElements(e,linkClicked,refEl);
  61. 			obj.toggleElements(e,linkClicked,refEl);
  62. 		}
  63.  
  64. 		if(objParameters[1] == "fade") {
  65. 			if(objStatus == true) {
  66. 				var attributes = {
  67. 					opacity: { from: .999, to: 0 }
  68. 				}
  69. 				var objAnim = new YAHOO.util.Anim(objParameters[0],attributes);
  70. 				objAnim.useSeconds = false;
  71. 				objAnim.duration = objParameters[2];
  72. 				objAnim.onComplete.subscribe(switchClasses);
  73. 				objAnim.animate();
  74. 			} else {
  75. 				Dom.setStyle(objParameters[0],"opacity",0);
  76. 				switchClasses();
  77. 				var attributes = {
  78. 					opacity: { from: 0, to: .999 }
  79. 				}
  80. 				var objAnim = new YAHOO.util.Anim(objParameters[0],attributes);
  81. 				objAnim.useSeconds = false;
  82. 				objAnim.duration = objParameters[2];
  83. 				objAnim.animate();
  84. 			}
  85. 		} else if (objParameters[1] == "slide") {
  86. 				// not implemented yet
  87. 		} else {
  88. 			// NO ANIMATION - switch classes
  89. 			switchClasses();
  90. 		}
  91. 	},
  92. 	toggleOtherElements : function(e,linkClicked,refEl) {
  93. 		// toggle selected state of other elements pointing to the same source
  94. 		for(var i=0; i<this.toggleLinks.length; i++) {
  95. 			var objParameters = this.toggleLinks[i].rel.split(",");
  96. 			var linkClickedParameters = linkClicked.rel.split(",");
  97.  
  98. 			if(objParameters[0] == linkClickedParameters[0]) {
  99. 				if(Dom.hasClass(this.toggleLinks[i],"selected")) {
  100. 					Dom.removeClass(this.toggleLinks[i],"selected");
  101. 				} else {
  102. 					Dom.addClass(this.toggleLinks[i],"selected");
  103. 				}
  104. 			}
  105. 		}
  106. 	}
  107. }
  108.  
  109. initPage = function() {
  110. 	YAHOO.lutsr.doToggle.init();
  111. }
  112.  
  113. Event.addListener(window,"load",initPage);

URL: http://www.lutsr.nl/yui/toggle/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.