0

guys.

I'm trying to make a collapsible content with jQuery. I "almost" did it, but the problem are the transitions. The collapse has been applying instantly, without the transitions.

ps: I tried other elements, as toggle, add/removeClass, hide/show... Any of these worked.

Above is my complete code in pastebin:

http://pastebin.com/gw6Zm3Ey

Gustavo Dias
  • 3,811
  • 3
  • 11
  • 6
  • You can't animate `height` having the value `auto`, also, the `transition` property is missing which property to transist, as in `transition: height 0.75s linear` – Asons Dec 07 '16 at 20:55
  • @LGSon I think if you omit the property value of `transition` it will default to `all`, so technically its not required, but is recommended. – zgood Dec 07 '16 at 20:57
  • @zgood And using `all` is not recommended either, as one easily get unexpected result based on which values each browser decides to animate – Asons Dec 07 '16 at 20:59
  • @LGSon I know thats why I ended my comment with _but is recommended_ ... I was just making the point that its not required is all – zgood Dec 07 '16 at 21:00
  • @zgood Perfect...so now we covered all of it :) – Asons Dec 07 '16 at 21:01
  • 1
    In the future, please provide all relevant code in an [mcve] in the question itself, not on a third-party site. – Heretic Monkey Dec 07 '16 at 21:05

1 Answers1

1

You cannot animate to height:auto; you would need to set a static height to transition to (you also would need to remove overflow: visible;, or ese everything becomes visible as soon as that class is applied - you can't animate overflow).

Here is a demo fiddle

To solve this problem, people normally use jquery's slideToggle() which will dynamically get the height then animate it. I would look into that

zgood
  • 12,181
  • 2
  • 25
  • 26