Hi YA,
I'm having so difficulties to make this functionality to work smoother and better. I need auto hight as my content is quite dynamic.
When I click the height of the accordion fires but doesn't have and smoothens on the animation. What am I missing?
Also is it done all ok overall? Would you change anything in there?
Thanks,
D
$(".accordion-item .button").click(playAnimation);
function playAnimation(event) {
event.preventDefault();
var $this = $(this).parent();
var $thisContent = $this.find('.accordion-content .article');
TweenLite.to($this,.3, {className: '-=expanded'});
TweenMax.to($thisContent, .3, {autoAlpha:0,ease: Sine.easeInOut,
onComplete:function() {
TweenMax.to($('.accordion-content .article'), .3, {height: "0",ease: Sine.easeInOut})
}
})
if (!$this.hasClass('expanded')){
var self = this;
setTimeout(function() {
theOffset = $(self).offset();
$('body,html').animate({ scrollTop: theOffset.top - 56 });
}, 310);
TweenMax.to($(".accordion-item"), .3, {className: '-=expanded', ease: Sine.easeInOut})
TweenMax.to($this, .3, {className: '+=expanded', ease: Sine.easeInOut})
TweenMax.to($('.accordion-content .article'), .3, {height: "0",autoAlpha:0, ease: Sine.easeInOut})
TweenMax.to($thisContent, .3, {height: "auto", ease: Sine.easeInOut,
onComplete:function() {
TweenMax.to($('.accordion-content .article'), .3, {autoAlpha:1,ease: Sine.easeInOut})
}
})
}
}