jquery setting correct height for content

Question

I've set up a div that stores text with a nice gradient fade at the bottom with a show hide button. I found this tutorial to help me do that, and for the most part i've managed to get it working for my needs.

However, I'm having an issue where when i have a rather long bit of text. When showing the text, it cuts off the bottom of the text. By doing a console.log($("#id).height()); it appears that it's picking up the div's max-height from the CSS rather than the height of the actual content (but i could be wrong).

I've set up a JSFiddle with my example: http://jsfiddle.net/3gnK7/4/ you'll notice that by clicking the Show button on the first part, the last para of the lorem ipsum text is cut off.

Answer 1

   totalHeight += $(this).outerHeight(true);

真正的论点也包括利润。

Answer 2

This does add a requirement of jqueryUI to get the animation however it works completely

first change your css to

.category_text {
    float: left;
    position: relative;
    overflow: hidden;
    margin-bottom: 1em;
    max-height: 120px;

}

.cat-height {
    max-height: 9999px;
    padding-bottom:30px;
}

then change your javascript to use toggleClass like so

$(document).ready(function () {
    $(".showbutton").live("click", function (e) {
        e.preventDefault();

        var buttonid = $(this).attr("id");
        buttonid = buttonid.substring(11, buttonid.length);

        $("#text_"+buttonid).toggleClass('cat-height','slow');

        if($("#showbutton_" + buttonid).text() == 'Show') {
           $("#showbutton_" + buttonid).text("Hide");
        }
        else {
            $("#showbutton_" + buttonid).text("Show");
        }
        return false;
    });
});

DEMO