Advanced Search

accordion 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).

Code
To use this snippet add a class "accordion" to a defenition list.
The "DT" will be converted to the clickable headers. The "DD" will be used for the accordion item content. Add a class "open" to an "DD" element which should be open on startup.

Call the main function by putting the code below in a initPage function:

YAHOO.lutsr.accordion.init(true,10,true);

The first parameter sets the animation on/off (default = true), the second represents the ammount of frames the animation should take (default = 10), the last defines if there could be more than one item open at once (default = true).

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. //++++++++++++++++++++++++++++++++++++
  8. // YUI ACCORDION
  9. // 1/22/2008 - Edwart Visser
  10. //
  11. // accordion
  12. //
  13. // REQUIRES: yahoo-dom-event.js, animation-min.js
  14. //
  15. // TODO: build hover script for highlighting header in IE
  16. // TODO: attach behaviour based on rel attribute
  17. //++++++++++++++++++++++++++++++++++++
  18.  
  19. YAHOO.namespace("lutsr");
  20.  
  21. YAHOO.lutsr.accordion = {
  22. 	properties : {
  23. 		animation : true,
  24. 		animationDuration : 10,
  25. 		multipleOpen : false
  26. 	},
  27.  
  28. 	init : function(animation,animationDuration,multipleOpen) {
  29. 		if(animation) {
  30. 			this.animation = animation;
  31. 		}
  32. 		if(animationDuration) {
  33. 			this.animationDuration = animationDuration;
  34. 		}
  35. 		if(multipleOpen) {
  36. 			this.multipleOpen = multipleOpen;
  37. 		}
  38.  
  39. 		var accordionObjects = Dom.getElementsByClassName("accordion");
  40.  
  41. 		if(accordionObjects.length > 0) {
  42.  
  43. 			for(var i=0; i<accordionObjects.length; i++) {
  44. 				if(accordionObjects[i].nodeName == "DL") {
  45. 					var headers = accordionObjects[i].getElementsByTagName("dt");
  46. 					var bodies = headers[i].parentNode.getElementsByTagName("dd");
  47. 				}
  48. 				this.attachEvents(headers,i);
  49. 			}
  50. 		}
  51. 	},
  52.  
  53. 	attachEvents : function(headers,nr) {
  54. 		for(var i=0; i<headers.length; i++) {
  55. 			var headerProperties = {
  56. 				objRef : headers[i],
  57. 				nr : i,
  58. 				jsObj : this
  59. 			}
  60.  
  61. 			Event.addListener(headers[i],"click",this.clickHeader,headerProperties);
  62. 		}
  63. 	},
  64.  
  65. 	clickHeader : function(e,headerProperties) {
  66. 		var parentObj = headerProperties.objRef.parentNode;
  67. 		var headers = parentObj.getElementsByTagName("dd"); 
  68. 		var header = headers[headerProperties.nr];
  69.  
  70. 		if(Dom.hasClass(header,"open")) {
  71. 			headerProperties.jsObj.collapse(header);
  72. 		} else {
  73. 			if(headerProperties.jsObj.properties.multipleOpen) {
  74. 				headerProperties.jsObj.expand(header);
  75. 			} else {
  76. 				for(var i=0; i<headers.length; i++) {
  77. 					if(Dom.hasClass(headers[i],"open")) {
  78. 						headerProperties.jsObj.collapse(headers[i]);
  79. 					}
  80. 				}
  81. 				headerProperties.jsObj.expand(header);
  82. 			}
  83. 		}
  84. 	},
  85.  
  86. 	collapse : function(header) {
  87. 		Dom.removeClass(Dom.getPreviousSibling(header),"selected");
  88. 		if(!this.properties.animation) {
  89. 			Dom.removeClass(header,"open");
  90. 		} else {
  91. 			this.initAnimation(header,"close");
  92. 		}
  93. 	},
  94. 	expand : function(header) {
  95. 		Dom.addClass(Dom.getPreviousSibling(header),"selected");
  96. 		if(!this.properties.animation) {
  97. 			Dom.addClass(header,"open");
  98. 		} else {
  99. 			this.initAnimation(header,"open");
  100. 		}
  101. 	},
  102.  
  103. 	initAnimation : function(header,dir) {
  104. 		if(dir == "open") {
  105. 			Dom.setStyle(header,"visibility","hidden");
  106. 			Dom.setStyle(header,"height","auto");
  107. 			Dom.addClass(header,"open");
  108. 			var attributes = {
  109. 				height : {
  110. 					from : 0,
  111. 					to : header.offsetHeight
  112. 				}
  113. 			}
  114. 			Dom.setStyle(header,"height",0);
  115. 			Dom.setStyle(header,"visibility","visible");
  116.  
  117. 			var animation = new YAHOO.util.Anim(header,attributes);
  118. 			animationEnd = function() {
  119. 				// leave it here
  120. 			}
  121. 			animation.duration = this.properties.animationDuration;
  122. 			animation.useSeconds = false;
  123. 			animation.onComplete.subscribe(animationEnd);
  124. 			animation.animate();
  125. 		} else if ("close") {
  126. 			var attributes = {
  127. 				height : {
  128. 					to : 0
  129. 				}
  130. 			}			
  131. 			animationEnd = function() {
  132. 				Dom.removeClass(header,"open");
  133. 			}
  134. 			var animation = new YAHOO.util.Anim(header,attributes);
  135. 			animation.duration = this.properties.animationDuration;
  136. 			animation.useSeconds = false;
  137. 			animation.onComplete.subscribe(animationEnd);
  138. 			animation.animate();
  139. 		}
  140. 	}
  141. }
  142.  
  143. initPage = function() {
  144. 	YAHOO.lutsr.accordion.init();
  145. }
  146.  
  147. Event.on(window,"load",initPage);

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.