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>
- Advertisement -
- Advertisement -
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...");
});
});
- Advertisement -