Question

I made a toggle that expands a div if you click a read more link:

$(".user-review-toggle").toggle(function(){
    // Change the height of the element to auto so we can get that value, and use it in our expanding animation.
    var currentUserReview = $(this).prev('.user-review');
    currentUserReview.css('height', 'auto');
    var calculatedHeight = currentUserReview.height();

    $(this).css("display", "none");
    $(this).css("backgroundPosition", "0 -12px");
    currentUserReview.animate({height: calculatedHeight}, 0, function () {
        $(this).css("overflow", "visible");
        $(this).css("line-height", "140%"); // Change it back to the original value
    });

The height of the div when the text is collapsed:

.has-photo .user-contribution .user-review, .has-review .user-contribution .user-review {
height: 98px;
}

It first temporally set the div’s height to auto so it can store its original size. Then it animates the height’s of the div to that height.

The problem now is that it expands excessively when there are a lot of characters and don’t expand enough when there are too few. Having an image beside the text also makes the final result a bit unexpected (as you can see int he screenshot):

Collapsed:

Expanded:

Any suggestions to fix this?

Answer 1

Are you setting with & height to your images? Try doing that. When images are not loaded they do not use any space at all. Try to set the dimensions of the images.
Hope that helps.