Skip to main content
Oct 04, 2013

One of very usefull tip is for creating a "Read More..." link when only a few lines of text are displayed and the rest of the text is shown after clicking the link.

<div>
    Short text
</div>
<span class="readmorelink">Read More...</span>
<div class="readmoretext">
    Here is more text.
</div>

Here is jQuery code for displaying rest of the text when Read More link is clicked:

$(document).ready(function() {
    $('.readmoretext').hide();
    $('span.readmorelink').click(function(){
        $('.readmoretext').show('slow');
        $(this).hide();
    });
});

The following code demonstrates "Read More..." and "Read Less.." toggle:

$(document).ready(function() {
    $('.readmoretext').hide();
    $('span.readmorelink').toggle(function(){
        $('.readmoretext').show('slow');
        $(this).text("Read Less...");
    },
    function(){
        $('.readmoretext').hide('slow');
        $(this).text("Read More...");
    });
});