Question

Right now I’m using the following to animate the element to 150px:

$(".user-review-toggle").toggle(function(){
        $(this).css("display", "none");
        $(this).css("backgroundPosition", "0 -12px");
        $(this).prev('.user-review').animate({height: 150}, 200, function () {
            $(this).css("overflow", "visible");
        });
    }, function(){
        $(this).css("backgroundPosition", "0 0");
        $(this).prev('.user-review').animate({height: 98}, 200, function () {
            $(this).css("overflow", "hidden");
        });
    });

I would like to animate the height of the element to auto.

Any suggestions to accomplish this?

EDIT:

I tried setting the element’s height to auto and extract the height and then use it but it didn’t work:

$(".user-review-toggle").toggle(function(){
$(this).prev('.user-review').css('height', 'auto');
    var height = $(this).prev('.user-review').height();

$(this).css("display", "none");
$(this).css("backgroundPosition", "0 -12px");
$(this).prev('.user-review').animate({height: height}, 200, function () {

Answer 1

If you want to set the height to the height of the content, then why not pass $('.user-review').height() as the param to the animate function.

.height() will always return the content height, regardless of the value of the CSS box-sizing property.