Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Demorus

Accordion doesnt work. Animating height property with TweenMax.

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>
  </div>

</div>

 

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

Hi,

 

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

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hi Demorus  :)

 

pls check this out :

 

See the Pen LEJOLK by MAW (@MAW) on CodePen

 

How come your version works? I see the difference but I dont understand the logic and the "set" part.

 

Thanks alot for the solution, I will know how to do it next time.

Link to comment
Share on other sites

height:"auto" : The browser calculates the height , but not tweenable . so ... for have a tween at first we set to "auto" and then tween from height:0

Link to comment
Share on other sites

  • 5 months later...

For anyone who stumbles upon this...It looks like the Codepen had a small issue...The link needed to be clicked twice to work.  

I have forked it here with a fix:

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

Link to comment
Share on other sites

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.
×