Jump to content
Search Community

Accordion doesnt work. Animating height property with TweenMax.

Demorus test
Moderator Tag

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Here is my codepen


What I am trying is to make my idea of a simple accordeon work with my existing markup. Animating from height 0 to 100% or auto does not work unless I find the hight of the content by creating  a variable named: var findHeight = $(this).find("span").height() and use it as a hight value instead. To my surprise it doesnt work either.


I would appreciate some insight on what im doing wrong here, why greensock isnt animating my height.


 HTML Code


<div class="expandables">

  <div><p>Click to show content</p>
  <span>Content to be shown. Content to be shown. Content to be shown. Content to be shown. Content to be shown. Content to be shown. Content to be shown.</span>



CSS Code


.expandable { width: 80%;padding:5%;overflow:visible; font-size: 115%;margin:auto}
.expandable span { height:0; color:#fff;font-size:95%; padding: 0px 0px 0px 3%; overflow:hidden; display:block}


Jquery + Greensock Code

$('.expandable div').click(function() {
    var clicks = $(this).data('clicks');
    var show = $(this).find("span")
    if (clicks) {
        TweenMax.to(show, 0.5, {height:"0", ease:Power2.easeOut})
      else {
        TweenMax.to(show, 1.5, {height:"100%", ease:Power2.easeOut})
  $(this).data("clicks", !clicks);

See the Pen NPLwRp by anon (@anon) on CodePen

Link to comment
Share on other sites



In this cases is always better to use from instances, specially if you have more than one element and the height of each element could be variable. Another option is get the element, then get it's height and pass that to a tween instance, but that instance should control it's parent's height with an overflow hidden.


As you can see the second method can become a bit messy real quick, so it's better to use a from instance. I forked your codepen:


See the Pen bNxYqq by anon (@anon) on CodePen



  • Like 1
Link to comment
Share on other sites

  • 5 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...