While working as expected in all other browsers,
opera refuses to tween the height of content.
oddly enough, as i sat annoyed rapidly clicking it over and over again, if it's closed, and you select some text, and keep clicking the same spot long enough, sometimes it pops open. lol. seriously.
ahh, it seems to sometimes open the first time clicked after the page is loaded. wth?
the 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]);
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;
}
}
});
} );
});
the html:
<div class="bio_accordion">
<div class="divToggle">test<span class="symbol">-</span></div>
<div class="moreInfo" style="margin-left:10px;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf
</div>
</div>
the css:
.bio_accordion
{
padding:0px;
margin:0px;
}
.divToggle
{
cursor: pointer;
color: #ffffff;
background-color:#1089b5;
padding: 8px;
}
.div_highlight
{
padding-left:30px;
padding-right:30px;
background-color:#096687;
}
.moreInfo
{
padding: 2px;
padding-top:15px;
padding-bottom:15px;
overflow: hidden;
}
.symbol
{
float:right;
}
