Expanding Divs with Height Auto jQuery

jQuery Crumbs

There is no expand a div to auto height. Cool trick to achieve this is with a max-height. Set it to 0 in the css, then expand with jQuery. The div will take the height you’re looking for.

CSS:

.expand-this-div {
	width: 170px;
	float:right;
	max-height: 0px;
	overflow: hidden;	
}

jQuery:

$('.expand-this-div').animate({ "max-height": "1000" }, 'slow');

And then to toggle that:

$('.expand-this-div').hover(
function(){
  $(this).animate({ "max-height": "1000" }, 'fast');
},
function() {
  $(this).animate({ "max-height": "0" }, 'fast');
});