Posted By

the_coder on 03/20/08


Tagged

prototypejs Scriptaculous accordion


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

wbowers
Gradualist


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


 / Published in: JavaScript
 

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

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.

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

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: Eleaf on June 28, 2008

Thank you for posting this! It really helps..

I wonder why the final stickman accordion release isn't this code? Since his release doesn't seem to really work with prototype 1.6/ script.aculo.us 1.8..

This seems to be working though, thanks!

Posted By: the_coder on July 3, 2008

thank you so much for this. my website if beautiful thanks to you!

btw, this account is fake.

Posted By: Gradualist on November 15, 2008

When i found Stickman's accordian wasn't working with the latest version of prototype.js I went to his site and was surprised that there hasn't been an update. Thanks for posting this here - my accordian web page is working again now - only wish I had found it sooner!

Posted By: statiic on November 21, 2008

I have a small problem with this new accordion in IE7. Somehow the second rows are not displaying properly in IE7.

http://www.frisvers.nl/client-services/frequently-asked-questions

Posted By: TrevBro on December 17, 2009

I'm using this accordion and wondered if anyone can tell me how to open the currently opened accordion on page refresh? Currently on page refresh it defaults back to my existing setting of all accordions closed.....any help much appreciated!

You need to login to post a comment.