JohnDoe JohnDoe - 1 year ago 55
CSS Question

max-height transition doesn't work and works slow

i'm having trouble animating a div expanding. My JQuery function does what it's supposed to, but the animation doesn't appear. I have tried both

transition : all
transition : max-height
but none seems to work. Also something very weird happens, when i want to hide my div again. It appears that there's some kind og delay before it disappears. This delay matches the time of the animation, but i can't figure out what's wrong. Please help.

Here's a fiddle:

Answer Source

You can't animate from a specific value (0px) to a relative value (100%). You need to use specific values:

Updated fiddle

$("p").on("click",function() {
    if($("#test").css("max-height") == "0px") {
    else {

Change "100%" to "100px" and it works fine.

Of course, for that paragraphs 100px isn't tall enough (the text is clipped). So you may need to add a function to calculate the auto-height in pixels.