max-height transition doesn't work and works slow

Question

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 and 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: https://jsfiddle.net/vbqc2c27/1/

Answer 1

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") {
    $("#test").css("max-height","100px");
  }
    else {
    $("#test").css("max-height","0px");
  }
});

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.