I’ve just downloaded the latest scriptaculous effects and prototype files and they seem to ‘break’ accordion. The accordion sort of works, but it seems to scale everything rather than slide up and down. I think lightwindow still works ok though. Has anyone else noticed this?

i just downloaded the latest versions of prototype and scriptaculous and am noticing this as well. Does anyone know a fix for this?

Hai-

I will have a brand new version out in about a week, I am in the middle of some major upgrades to my site and even though the library is done I need to finish the project page and documentation.

Kevin Miller
stickmanlabs | Founder

Here is a fixed V2.0 version that works with prototype 1.6 and scriptaculous 1.8.
I found the fix on this forum.

@stickmanlabs: why doesnt the code (.js) tags work here, would be very nice. check out http://pwc-forum.xilinus.com/forums/5/topics/34

if (typeof Effect == ‘undefined’) throw(“accordion.js requires including script.aculo.us’ effects.js library!”);

var accordion = Class.create();
accordion.prototype = {

//
  //  Setup the Variables
  //
  showAccordion : null,
  currentAccordion : null,
  duration : null,
  effects : [],
  animating : false,

//  
//  Initialize the accordions
//
initialize: function(container, options) {
  if (!$(container)) {
    throw(container+" doesn't exist!");
    return false;
  }
},

this.options = Object.extend({
    resizeSpeed : 8,
    classNames : {
        toggle : 'accordion_toggle',
        toggleActive : 'accordion_toggle_active',
        content : 'accordion_content'
    },
    defaultSize : {
        height : null,
        width : null
    },
    direction : 'vertical',
    onEvent : 'click'
}, options || {});

this.duration = ((11-this.options.resizeSpeed)*0.15);

var accordions = $$('#'container' .'+this.options.classNames.toggle);
accordions.each(function(accordion) {
    Event.observe(accordion, this.options.onEvent, this.activate.bind(this, accordion), false);
    if (this.options.onEvent == 'click') {
      accordion.onclick = function() {return false;};
    }
}.bind(this));

if (this.options.direction == 'horizontal') {
    var options = {width: '0px', display: 'none'};
} else {
    var options = {height: '0px', display: 'none'};            
}

this.currentAccordion = $(accordion.next(0)).setStyle(options);

//
//  Activate an accordion
//
activate : function(accordion) {
    if (this.animating) {
        return false;
    }
},
// 
// Deactivate an active accordion
//
deactivate : function() {
    var options = $H({
      duration: this.duration,
        scaleContent: false,
        transition: Effect.Transitions.sinoidal,
        queue: {
            position: 'end', 
            scope: 'accordionAnimation'
        },
        scaleMode: { 
            originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
            originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
        },
        afterFinish: function() {
            this.showAccordion.setStyle({
      height: 'auto',
                display: 'none'
            });                
            this.showAccordion = null;
            this.animating = false;
        }.bind(this)
    });

this.effects = [];

this.currentAccordion = $(accordion.next(0));
this.currentAccordion.setStyle({
    display: 'block'
});

this.currentAccordion.previous(0).addClassName(this.options.classNames.toggleActive);

if (this.options.direction == 'horizontal') {
    this.scaling = $H({
        scaleX: true,
        scaleY: false
    });
} else {
    this.scaling = $H({
        scaleX: false,
        scaleY: true
    });            
}

if (this.currentAccordion == this.showAccordion) {
  this.deactivate();
} else {
  this._handleAccordion();
}

this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);
},

new Effect.Scale(this.showAccordion, 0, options.update(this.scaling).toObject());

//
// Handle the open/close actions of the accordion
//
  _handleAccordion : function() {
      var options = $H({
          sync: true,
          scaleFrom: 0,
          scaleContent: false,
          transition: Effect.Transitions.sinoidal,
          scaleMode: { 
              originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
              originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
          }
      });

this.effects.push(
        new Effect.Scale(this.currentAccordion, 100, options.update(this.scaling).toObject())
    );

if (this.showAccordion) {
    this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);
}

options = $H({
    sync: true,
    scaleContent: false,
    transition: Effect.Transitions.sinoidal
});

this.effects.push(
    new Effect.Scale(this.showAccordion, 0, options.update(this.scaling).toObject())
);

new Effect.Parallel(this.effects, {
        duration: this.duration, 
        queue: {
            position: 'end', 
            scope: 'accordionAnimation'
        },
        beforeStart: function() {
            this.animating = true;
        }.bind(this),
        afterFinish: function() {
            if (this.showAccordion) {
                this.showAccordion.setStyle({
                    display: 'none'
                });                
            }
            $(this.currentAccordion).setStyle({
              height: 'auto'
            });
            this.showAccordion = this.currentAccordion;
            this.animating = false;
        }.bind(this)
    });
}
}

Is the above code snippets to replace accordion.js to make it function with the current prototype and scriptaculous libraries or is there still a new release coming shortly?

LOL, i spent many days playing around with it, tweaking it and apply css style to fit my site and when i implemented the code in the page of sit…...pouf i realized it’s not working with the latest libraries which i use for other effect.

I hope your next version will come soon stickmanlabs, cause your accordion effect is really nice

i tried the “fix” but i still get an error, is it just a plain replacement of the accordion.js that needs to be done? was any one able to make it work?

thanks

cheers

Hello Kevin,

is there any chance that you can mail me the new version of the Accordion? I would really appreciate it. I can’t get v2 to work with latest prototype version and it is in kind of a hurry.

Many thanks,
Gustaf

Me too!

I would be more than happy to donate $20 or more if Accordion would be updated to work with the latest prototype and effects scripts… but it seems to me like perhaps development has been halted on these scripts… which is fine… they are free after all… but I’m not about to make a donation for code that’s not supported or updated.