By: Prem Tiwari | 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.
Copy paste below css code in your stylesheet or add in your current webpage before head tag closed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <style type="text/css"> .comment{ width:756px; background-color:#f0f0f0; margin:10px; } a.morelink{ text-decoration:none; outline:none; } .morecontent span{ display:none } </style> |
1 2 3 | <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> |
After including the above jQuery file copy paste below code before head tag closed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <script type="text/javascript"> $(document).ready(function() { var showChar = 250; var ellipsestext = "..."; var moretext = "Read More"; var lesstext = "Raad Less"; $('.more').each(function() { var content = $(this).html(); if (content.length > showChar) { var c = content.substr(0, showChar); var h = content.substr(showChar - 1, content.length - showChar); var html = c + '<span class="moreelipses">' + ellipsestext + '</span> <span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>'; $(this).html(html); } }); $(".morelink").click(function() { if ($(this).hasClass("less")) { $(this).removeClass("less"); $(this).html(moretext); } else { $(this).addClass("less"); $(this).html(lesstext); } $(this).parent().prev().toggle(); $(this).prev().toggle(); return false; }); }); </script> |
Now add the comment more class in main DIV of your content like below i have added.
1 2 3 4 5 6 7 8 9 10 | <div class="comment more"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> |
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.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
Jquery, jquery demo, jquery tutorials for beginners, readmore and readless using jQuery, readmore in jquery, readmore using jQuery
