Show More piece by piece - jQuery
<p>I've been working with the below code, (also found here: <a href="http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/" rel="nofollow">http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/</a>), to dynamically display more text when a "show more" link is clicked.</p>

<p>This shows all of the text at once, however I'd like to display it piece by piece, so clicking "Show More" the first time would show an additional 500 characters, clicking it a second time would show 500 more characters, etc.  Any ideas on how to accomplish this?  I can somewhat figure out how to do it with set text, but not with dynamic text.</p>

<pre><code>$(document).ready(function() {
var showChar = 100;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
    var content = $(this).html();

    if(content.length &gt; showChar) {

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

        var html = c + '&lt;span class="moreellipses"&gt;' + ellipsestext+ '&amp;nbsp;&lt;/span&gt;&lt;span class="morecontent"&gt;&lt;span&gt;' + h + '&lt;/span&gt;&amp;nbsp;&amp;nbsp;&lt;a href="" class="morelink"&gt;' + moretext + '&lt;/a&gt;&lt;/span&gt;';

        $(this).html(html);
    }

});

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
});
});
</code></pre>
