How to create readmore and readless using 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.

jquery_logo

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.

<style type="text/css">
.comment{
	width:756px;
	background-color:#f0f0f0;
	margin:10px;
}
a.morelink{
	text-decoration:none;
	outline:none;
}
.morecontent span{
	display:none
}
</style>

.comment{

width:756px;

background-color:#f0f0f0;

margin:10px;

}

a.morelink{

text-decoration:none;

outline:none;

}

.morecontent span{

display:none

}

</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

1	<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.

<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>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<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>

$(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.

<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>

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>

Conclusion

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.

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

How to create readmore and readless using jQuery

Add CSS code

Conclusion

Recommended Posts:

webmentor