How to create readmore and readless using jQuery

| Last Updated: | In: Freebies, Javascript & Ajax, Jquery

Hi friends hope you are doing good. In todays tutorial i will let you know a very useful code snippets how to create readmore and readless using jQuery. This will help beginner developers

Please make sure you have added the latest jQuery in your web page, where you want to implement the readmore and readless functionality. The below code will not work without including the latest jQuery file.


In several web application you need to add readmore option to read the content in detail. When your webpage will load only 250 words will display and after click on readmore link you will get the complete contents there without page refresh. So lets start to create readmore using jQuery. Include the below jQuery file before head tag closed.

Add CSS code

Copy paste below css code in your stylesheet or add in your current webpage before head tag closed.

After including the above jQuery file copy paste below code before head tag closed.

Now add the comment more class in main DIV of your content like below i have added.


If you still need help to create this, feel free to add your comments in below comment section. Do you like & share this article with your friends, and don’t forget to follow us on Facebook and Twitter to learn cool tutorials.

Tags: , , , , ,

About: Prem Tiwari

Prem Tiwari is the founder of and is a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby.

You may also like:

Follow us!

Get Free Access of 380+ Scripts

Don't worry you'll not be spammed!

Featured eBook

WordPress Security Guide

Free Guide: Learn how to implement security guideline in your WordPress site...


Pincode Finder

pincode-finder tool

Online Pincode Finder

Best tool to locate post Office address and pincodes of all india...

Copyright © 2013-2017