SlideDown not animating properly - jQuery

Question

I seem to be very confused with this.

I am trying to use the slideDown function in jQuery, however when the div is clicked on, the 'information' div just jumps and doesnt animate.

I think one of the cause is that the .information div has the following properties:

When the min-height property is removed the animations work. However I want the min-height to be there.

Would anybody be able to provide any solutions?

View Here: http://www.bootply.com/EXXhRTAECu

CSS:

.information {
                margin-left: auto;
                margin-right: auto;
                /*border:1px solid #000;*/
                border-top: 1px solid #000;
                border-bottom: 1px solid #000;
                width: 100%;
                display: none;
                background-color:#f2f2f2;
                box-shadow: 1px 1px 1px #f2f2f2;
                overflow: hidden; 
                min-height: 300px; /*When I remove this it works*/
                height:auto;

            }

Answer 1

That is because you are not allowed to specify the min-height property on the sliding div. Remove the min-height: 300px from the .information div, and if you need the height, you can add the min-height to the inner div like this:

.actualInfo {
  min-height: 300px;
}