Showing more text with jquery

I am looking for a way to show more or less text. I want to show 600 characters by default and if show more is clicked it will show 600 more characters and then if clicked again shows 600 more until there are no more characters. I also would like a show less button to collapse the text back to its default 600 characters. I have pages with 5000+ words and this would make reading much easier and make it look nicer. Right now I am using this to show the first 600 chars and when show more is clicked it expands all the way.

$(document).ready(function() {
var showChar = 600;
var ellipsestext = "...";
var moretext = "View more";
var lesstext = "View less";
$('.more').each(function() {
    var content = $(this).html();

    if(content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar-1, content.length - showChar);

        var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '&nbsp;&nbsp;</span><a rel="nofollow" href="" class="morelink">'+moretext+'</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeCl开发者_StackOverflow社区ass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
});
});

Could somebody please edit this code to work like this or help me to achieve this any other way? I would really like to make my pages more presentable and readable and this would definitely do the trick. Thanks.

I knocked up the following code to show you how to elicit information from the viewer concerning the number of lines:

The HTML:

<div style="height: 6em; overflow: auto; line-height: 1.5em">
    <p> Number of lines to display  (optional) <input type="text" value="4" style="width: 3em"><button type="button" class="scrollLength">change</button></p>
    <p>
        This is a huge load of text<br>
        line 2<br>
        line 3<br>
        line 4<br>
        ...etc....
    </p>
</div>

The jQuery code:

$('button.scrollLength').each(function(){
    var $this = $(this);
    $this.click(
        function(){
            var myParent      = $this.parent();
            var numberOfLines = myParent.children('input').attr('value');
            var displayArea    = myParent.parent();
            if (numberOfLines > 0) {
                var lineHeight  = displayArea.css('lineHeight');
                var heightUnits = lineHeight.replace(/[0-9]./g, '');
                displayArea.css({height: (numberOfLines * parseFloat(lineHeight)) + heightUnits});
            }
        }
    );
});

Regards Neil

check out the following links -

http://plugins.learningjquery.com/expander/index.html#getting-started

http://viralpatel.net/blogs/2010/12/dynamically-shortened-text-show-more-link-jquery.html

http://shakenandstirredweb.com/240/jquery-moreless-text

Why do all this when you can do more or less what you want by putting the text in a div that has scrollbars. You don't need any javascript at all, just style it using CSS e.g.

<div style="height: 6em; overflow: auto; line-height: 1.5em">
    <p>
        This is a huge load of text<br>
        line 2<br>
        line 3<br>
        line 4<br>
        ...etc....
    </p>
</div>

Just set "height" (6em in the example above) to 1.5 times number of lines you want to display at any one time (e.g. for approximately 40 lines set "height: 60em").

This way you also handle the fact that the 600th character will almost certainly be in the middle of a word!

Regards Neil