Read More Function (Show / Hide)

The following can be used to implement a “Read More” function to hide long content on a page.

Wrap the content you want to hide in the following tag:

<div class="readmore-text">Your Hidden Content</div>

And include the Read More script site-wide:

<script>
jQuery(document).ready(function($) {
$('.readmore-text').hide();
$('.readmore-text').after('<a class="readMore" style="cursor:pointer;margin-bottom:12px;display:inline-block;">Read More</a>');
$('.readMore').click(function(){
$(this).prev().slideToggle(200,function() {
$(this).next('.readMore').text(function (index, text) {
return (text == 'Read More' ? 'Close' : 'Read More');
});
});
return false;
});
});
</script>

The script can also be customized to have dynamic content:

<script>
jQuery(document).ready(function($) {
$('.readmore-copy').hide();
$('.readmore-copy').after('<a class="read-more closed" style="cursor:pointer;margin-bottom:12px;display:inline-block;">Read <span class="read-status">More</span> <span class="caron">+</a>');
$('.read-more').click(function(){
$(this).prev().slideToggle(200,function() {
if($(this).next('.read-more').hasClass( "closed" )) {
$('.read-more').removeClass( "closed" )
$('.read-more .read-status').text('Less');
$('.read-more .caron').text('×');
}else{
$('.read-more').addClass( "closed" )
$('.read-more .read-status').text('More');
$('.read-more .caron').text('+');
}
});
return false;
});
});
</script>