I have an array set with the heights of each hidden div, but when I use it, the div instantly jumps down, rather than slowly sliding as when there is a literal number.
EDIT: testing seems to reveal that it's a problem with the push method, as content_height.push(item.getElement('.moreInfo').offsetHeight);alert(content_height[i]);gives undefined, but alert(item.getElement('.moreInfo').offsetHeight); gives the correct values
Javascript:
window.addEvent('domready', function(){
var content_height = [];i=0;
$$( '.bio_accordion' ).each(function(item){
i++;
content_height.push( item.getElement('.moreInfo').offsetHeight);
var thisSlider = new Fx.Slide( item.getElement( '.moreInfo' ), { mode: 'horizontal' } );
thisSlider.hide();
item.getElement('.moreInfo').set('tween').tween('height', '0px');
var morph = new Fx.Morph(item.getElement( '.divToggle' ));
var selected = 0;
item.getElement( '.divToggle' ).addEvents({
'mouseenter': function(){
if(!selected) this.morph('.div_highlight');
},
'mouseleave': function(){
if(!selected) {
this.morph('.divToggle');
}
},
'click': function(){
if (!selected){
if (this.getElement('.symbol').innerHTML == '+')
this.getElement('.symbol').innerHTML = '-';
else
this.getElement('.symbol').innerHTML = '+';
item.getElement('.moreInfo').set('tween', {
duration: 1500,
transition: Fx.Transitions.Bounce.easeOut
}).tween('height', content_height[i]); //replacing this with '650' keeps it smooth
selected = 1;
thisSlider.slideIn();
}
else{
if (this.getElement('.symbol').innerHTML == '+')
this.getElement('.symbol').innerHTML = '-';
else
this.getElement('.symbol').innerHTML = '+';
thisSlider.slideOut();
item.getElement('.moreInfo').set('tween', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
}).tween('height', '0px');
selected = 0;
}
}
});
} );
});
Why could this be? Thanks so much!
