Truncate paragraph first 100 character and hide rest content of paragraph to show/hide rest contenct with more/less link

Question

I have paragraph which has more than 500 character. I want to get only initial 100 character and hide rest of it. Also I want to insert \"More\" link next to 100 character.

Answer 1

It looks like a couple other people beat me to it, but here is what I came up with.

var MORE = "... More...",
    LESS = " Less...";

$(function(){
    $("p").each(function(){
        var $ths = $(this),
            txt = $ths.text();

        //Clear the text
        $ths.text("");

        //First 100 chars
        $ths.append($("").text(txt.substr(0,100)));

        //The rest
        $ths.append($("").text(txt.substr(100, txt.length)).hide());

        //More link
        $ths.append(
            $("").text(MORE).click(function(){
                var $ths = $(this);

                if($ths.text() == MORE){
                    $ths.prev().show();
                    $ths.text(LESS);
                }
                else{
                    $ths.prev().hide();
                    $ths.text(MORE);
                }
            })
        );
    });
});