Expand/collapse div with animation and non fixed size

Question

http://embed.plnkr.co/tcTZlA/preview

Basically all I want is not having to set the height in the .slideDown class. I want it to expand based on the height of the content of the div. I didn't find how to do this the AngularJS way so if you have any clue I'll take it.

Thank you

Answer 1

.slideDown {
  height:141px;
  transition:height 0.35s ease;
  overflow:hidden;
  position:relative;
}

In this class remove height property then it will become non fixed size like this

try this

   .slideDown.ng-hide {
  max-height: 0;
  transition: max-height 0.35s ease-out;
  overflow:hidden;
  position:relative;
}

.slideDown {
  max-height: 1000px;
 transition: max-height 0.35s ease;
  overflow:hidden;
  position:relative;
}

Answer 2

work with max-height property not height

.slideDown.ng-hide {
  max-height:0;
  transition:max-height 0.35s ease;
  overflow:hidden;
  position:relative;
}

.slideDown {
  max-height:400px; // make this value higher than the expected content value 
  transition:max-height 0.35s ease;
  overflow:hidden;
  position:relative;
}