Collapsible paragraphs with Jquery

Ever felt like there is too much content on your product’s front page? The page looks cluttered due to much content but the entire article is important because you are obliged to tell your visitors the whole story without taking them to another page and also it is good for SEO.

I faced this problem during a recent design project I worked on. I came up with a little nifty trick to hide some information from the readers using Javascript and display the content only on request.

What I wanted to do was to show only the first paragraph by default, with a little “read more” link that exposes the rest of the paragraphs, see a working demo here.

The Code

<div id="content">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec risus.Sed ornare imperdiet arcu. Duis ullamcorper tincidunt magna. Nulla non nisi.

In vel ligula vel justo convallis molestie. Fusce non orci ut turpis mollis ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus lacinia lacus. Nulla faucibus.
</div>

This is simply a basic HTML block with the ID content containing a few paragraphs.

function collapseText() {
$('#content > p:first').append("<a id="\&quot;showmorelist\&quot;" href="\">Show more &raquo;</a>");
$('#content > p:not(p:first)').hide();
}
function showMore() {
$('#content > p:not(p:first)').show();
$('#content > p:first a#showMoreList').css("display", "none");
}
$(document).ready(function(){
collapseText();
});

How it works

The function collapseText is loaded when document is ready. What the function does is append an anchor after the first paragraph. The anchor links to another Javascript function called showMore(). The second line selects all paragraphs except the first and adds the style display: none to hide them.

The function showMore() does the opposite by making the paragraphs visible again and hiding the anchor we added in the previous function.

Demo

Here is a demo of Collapsible Paragraphs, if you’d like to see it in action.

Conclusion

The advantage is that the content block is still editable from the CMS backend  but there is no embedded code in the markup since it is all done in the front-end (so there is no chance the client might mess up the code while editing).

Also, if javascript is disabled, the entire block will be visible without generating any errors or breaking anything.

It was simple challenge I faced at work today. I thought I would share it. It also shows how powerful and flexible JQuery’s selector functions are.