Question

I’m trying to limit my descriptions texts in a list view to an amount number of charachters with the option to toggle down the rest of it on click. Limiting the text is not a problem it works with the following code snippet http://jsfiddle.net/lgtsfiddler/G42dR/5/

$("p").each(function(i) {
    len = $(this).text().length;
    if (len > 150) {
        $(this).text($(this).html().substr(0, 150));
    }
});

How could add the dropdown event to it?

Answer 1

One way of doing this would be to wrap the “preview” portion and the remaining portion of your text in separate spans. Then, you could add a link that toggles whether the span containing the remaining portion of the text is hidden or displayed:

$(this).html("<span>" + $(this).text().substr(0,150) + "</span><span style='display:none'>" + $(this).text().substr(150) + "</span>");

var link = $("<a href='#' class='more'>More..</a>");
$(this).append(link);
$(link).click(function(){
    $(this).prev().toggle();
    $(this).html($(this).html()=="More.."?"Less":"More..");
});

Demo: http://jsfiddle.net/G42dR/9/