Show more less content using jquery


Have you come across any situation where you need to toggle to show more less content. This feature comes in handy at situation at many news/content based websites where you need to show lots of articles and this feature helps add more content on less area. In this tutorial you will learn how to show more less content using jquery.

View Demo

Readmore.js jQuery plugin

Let me first tell you that I am not the author of this awesome jquery plugin that is been used in this tutorial, This jquery plugin name is Readmore.js and been written by Jed Foster. Now let’s see how do we use this plugin to show more less content.

Step 1. First of all we will create an html page called index.html and attach jquery library file to it.

Step 2. Add a div container inside the body tag and give an ID ( I have used default ) to it. add some dummy text inside the container to it.

Step 3. Add readmore.js file just above body tag and then bind the div ID with this plugin. see below.

If you didnt get the read more text, try giving a lesser value for collapsedHeight attribute.

Alternatively you can bind the same div using the class attribute. You can also change the margin, height, anchor text and speed of animation. See below.

If you have any great plugin to achieve the same objective, feel free to share with us in the comment section below.

View Demo


About Author

Entrepreneur & Dreamer

I am a passionate Software Professional, love to learn and share my knowledge with others.

Software is the hardware of my life.


  1. I really appreciate the work you are doing. I have been learning a lot from you and your tutorials are exactly what I have been looking to learn. Thank you so much.

Leave A Reply

CommentLuv badge

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.