Question

I have an element with a min-height of 300px set in CSS:

<!-- HTML -->
<div id="summary"></div>
<div id="collapse"></div>
/* CSS */
#summary { min-height: 300px } 

When I click on the #collapse element, I would like the #summary element to collapse smoothly to a height of 100px.

$("#collapse").click(function() {
   $("#summary").animate({ height: 100}, 1000);
}); 

However, nothing is happening, and I think that is because of the min-height property.

I have read this discussion on the jQuery forums, but I still can’t figure out how to make the #summary div animate smoothly – setting the min-height to auto as they suggest makes the div vanish and then reappear! Can anyone help?

UPDATE: I’ve made a jsFiddle to demonstrate the problem.

Answer 1

You need to use height in css in instead of min-height as you decrease the height to 100 and min-height is 300 on click event.

Live Demo

Change

#summary { min-height: 300px } 

To

#summary { height: 300px; } 

If you need to use min-width then you need to change min-width in animate instead of height.