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


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.