Stickman Labs' Accordion, updated for Prototype.js 1.6 !!!


/ Published in: JavaScript
Save to your folder(s)

The fix listed in that URL is munged by the forum formatting, so I went through and figured out where the changes were and posted a _working_ snippet here.


Copy this code and paste it in your HTML
  1. // accordion.js v2.0
  2. //
  3. // Copyright (c) 2007 stickmanlabs
  4. // Author: Kevin P Miller | http://www.stickmanlabs.com
  5. //
  6. // Accordion is freely distributable under the terms of an MIT-style license.
  7. //
  8. // I don't care what you think about the file size...
  9. // Be a pro:
  10. // http://www.thinkvitamin.com/features/webapps/serving-javascript-fast
  11. // http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files
  12. //
  13.  
  14. /*-----------------------------------------------------------------------------------------------*/
  15.  
  16. if (typeof Effect == 'undefined')
  17. throw("accordion.js requires including script.aculo.us' effects.js library!");
  18.  
  19. var accordion = Class.create();
  20. accordion.prototype = {
  21.  
  22. //
  23. // Setup the Variables
  24. //
  25. showAccordion : null,
  26. currentAccordion : null,
  27. duration : null,
  28. effects : [],
  29. animating : false,
  30.  
  31. //
  32. // Initialize the accordions
  33. //
  34. initialize: function(container, options) {
  35. if (!$(container)) {
  36. throw(container+" doesn't exist!");
  37. return false;
  38. }
  39.  
  40. this.options = Object.extend({
  41. resizeSpeed : 8,
  42. classNames : {
  43. toggle : 'accordion_toggle',
  44. toggleActive : 'accordion_toggle_active',
  45. content : 'accordion_content'
  46. },
  47. defaultSize : {
  48. height : null,
  49. width : null
  50. },
  51. direction : 'vertical',
  52. onEvent : 'click'
  53. }, options || {});
  54.  
  55. this.duration = ((11-this.options.resizeSpeed)*0.15);
  56.  
  57. var accordions = $$('#'+container+' .'+this.options.classNames.toggle);
  58. accordions.each(function(accordion) {
  59. Event.observe(accordion, this.options.onEvent, this.activate.bind(this, accordion), false);
  60. if (this.options.onEvent == 'click') {
  61. accordion.onclick = function() {return false;};
  62. }
  63.  
  64. if (this.options.direction == 'horizontal') {
  65. var options = {width: '0px', display:'none'};
  66. } else {
  67. var options = {height: '0px', display:'none'};
  68. }
  69. // options.merge({display: 'none'});
  70.  
  71. this.currentAccordion = $(accordion.next(0)).setStyle(options);
  72. }.bind(this));
  73. },
  74.  
  75. //
  76. // Activate an accordion
  77. //
  78. activate : function(accordion) {
  79. if (this.animating) {
  80. return false;
  81. }
  82.  
  83. this.effects = [];
  84.  
  85. this.currentAccordion = $(accordion.next(0));
  86. this.currentAccordion.setStyle({
  87. display: 'block'
  88. });
  89.  
  90. this.currentAccordion.previous(0).addClassName(this.options.classNames.toggleActive);
  91.  
  92. if (this.options.direction == 'horizontal') {
  93. this.scaling = $H({
  94. scaleX: true,
  95. scaleY: false
  96. });
  97. } else {
  98. this.scaling = $H({
  99. scaleX: false,
  100. scaleY: true
  101. });
  102. }
  103.  
  104. if (this.currentAccordion == this.showAccordion) {
  105. this.deactivate();
  106. } else {
  107. this._handleAccordion();
  108. }
  109. },
  110. //
  111. // Deactivate an active accordion
  112. //
  113. deactivate : function() {
  114. var options = $H({
  115. duration: this.duration,
  116. scaleContent: false,
  117. transition: Effect.Transitions.sinoidal,
  118. queue: {
  119. position: 'end',
  120. scope: 'accordionAnimation'
  121. },
  122. scaleMode: {
  123. originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
  124. originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
  125. },
  126. afterFinish: function() {
  127. this.showAccordion.setStyle({
  128. height: 'auto',
  129. display: 'none'
  130. });
  131. this.showAccordion = null;
  132. this.animating = false;
  133. }.bind(this)
  134. });
  135. // options.merge(this.scaling);
  136.  
  137. this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);
  138.  
  139. new Effect.Scale(this.showAccordion, 0, options.update(this.scaling).toObject());
  140. },
  141.  
  142. //
  143. // Handle the open/close actions of the accordion
  144. //
  145. _handleAccordion : function() {
  146. var options = $H({
  147. sync: true,
  148. scaleFrom: 0,
  149. scaleContent: false,
  150. transition: Effect.Transitions.sinoidal,
  151. scaleMode: {
  152. originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
  153. originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
  154. }
  155. });
  156. options.merge(this.scaling);
  157.  
  158. this.effects.push(
  159. new Effect.Scale(this.currentAccordion, 100, options.update(this.scaling).toObject())
  160. );
  161.  
  162. if (this.showAccordion) {
  163. this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);
  164.  
  165. options = $H({
  166. sync: true,
  167. scaleContent: false,
  168. transition: Effect.Transitions.sinoidal
  169. });
  170. options.merge(this.scaling);
  171.  
  172. this.effects.push(
  173. new Effect.Scale(this.showAccordion, 0, options.update(this.scaling).toObject())
  174. );
  175. }
  176.  
  177. new Effect.Parallel(this.effects, {
  178. duration: this.duration,
  179. queue: {
  180. position: 'end',
  181. scope: 'accordionAnimation'
  182. },
  183. beforeStart: function() {
  184. this.animating = true;
  185. }.bind(this),
  186. afterFinish: function() {
  187. if (this.showAccordion) {
  188. this.showAccordion.setStyle({
  189. display: 'none'
  190. });
  191. }
  192. $(this.currentAccordion).setStyle({
  193. height: 'auto'
  194. });
  195. this.showAccordion = this.currentAccordion;
  196. this.animating = false;
  197. }.bind(this)
  198. });
  199. }
  200. }

URL: http://discuss.stickmanlabs.com/forums/8/topics/725

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.