1

I just came across a small problem the situation is like this:

I have a list that needs to be expanded when a user clicks on a list item. The content is of variable height so this is what I am trying to achieve:

Toggle a CSS class on the underlaying elements with JS (this is working)

The problem I have is that with a transition animation set in CSS the animation wont work:

.expandable{
    height:0px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

This is the initial CSS ^

when toggled:

.expandable{
   height:auto;
}

The problem I am having is that once I use height auto instead of a height in pixels the transition breaks. Question: Is this just not possible in CSS and should I use JS to animate the height or is there a way to do this in CSS?

Thank you

Martijn de Langh
  • 405
  • 3
  • 16
  • 3
    Transition to `auto` is not possible but you could work it around by using `max-height` etc. I think there are already a few similar questions. – Harry Aug 21 '15 at 07:44

0 Answers0