0

I'm trying to make a list that expands when you click on it, and make it smooth using transition 1s all. However there is hidden part in the list, that I want to expand when the user clicks on the item. But i cannot get it to expand smoothly, it just seems to toggle it on/off.

See the JSFiddle for the code.

Could anyone help?

Edit: I want it to toggle in height (much like BootStrap's collapse class). Not toggle the display property.

If you bothered to look at the code, Praveen, you would have seen that.

Chud37
  • 4,907
  • 13
  • 64
  • 116
  • You can't use `auto` for transitions. There are work arounds though. You can keep `height: auto` on all the time, and transition `max-height: 0px` to `max-height: 30px` or whatever is reasonable. May not be perfect, but it'll work. https://css-tricks.com/using-css-transitions-auto-dimensions/ – TheCrzyMan Nov 14 '18 at 14:03
  • added the duplicate for the height ... if you want more I can add, all of them exists – Temani Afif Nov 14 '18 at 14:12

0 Answers0