Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Add More or Less Link to Text | Show More Link to Shorten Text to Display Rest of Text

Feb 24, 2013
Introduction
  
Here I will explain how to add more/less link to text to display remaining text in
jQuery or add read more link button to text using jQuery. In Facebook if text is more than few characters those extra words will hide and display more link to display rest of text to user. Now I will explain how to create the "More" link button to display rest of the text using jQuery.

Description:
  
In previous posts I explained Add blinking text using jQuery, jQuery Show hidden content on mouse over, jQuery Bouning Menu Example, jQuery floating menu with scrolling and many articles relating to 
jQuery, asp.net. How to display limited text with more link to display remaining text using jQuery.

To implement this functionality we need to write the code like as shown below


<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<title>jQuery Add More/Less link to Text</title>
<script type="text/javascript">
$(function() {
var showChar = 120, showtxt = "more", hidetxt = "less";
$('.more').each(function() {
var content = $(this).text();
if (content.length > showChar) {
var con = content.substr(0, showChar);
var hcon = content.substr(showChar, content.length - showChar);
var txt= con +  '<span class="dots">...</span><span class="morecontent"><span>' + hcon + '</span>&nbsp;&nbsp;<a href="" class="moretxt">' + showtxt + '</a></span>';
$(this).html(txt);
}
});
$(".moretxt").click(function() {
if ($(this).hasClass("sample")) {
$(this).removeClass("sample");
$(this).text(showtxt);
} else {
$(this).addClass("sample");
$(this).text(hidetxt);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<style type="text/css">
body{
font-family: Calibri, Arial;
margin: 0px;
padding: 0px;
}
.more {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}
.morecontent span {
display: none;
}
</style>
</head>
<body>
<div class="more">
Welcome to Aspdotnet-suresh. It's Technical blog related to Microsoft Technologies.
It's Technical blog related to Microsoft Technologies. It's Technical blog related
to Microsoft Technologies
</div>
<div class="more">
Aspdotnet-Suresh.com offers many Microsoft related articles. Welcome to Aspdotnet-suresh.
It's Technical blog related to Microsoft Technologies.
It's Technical blog related to Microsoft Technologies. It's Technical blog related
to Microsoft Technologies
</div>
<div class="more">
It's Technical blog related to Microsoft Technologies.
It's Technical blog related to Microsoft Technologies. It's Technical blog related
to Microsoft Technologies
</div>
</body>
</html>
Live Demo

Check below text for live demo


Welcome to Aspdotnet-suresh. It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies
Aspdotnet-Suresh.com offers many Microsoft related articles. Welcome to Aspdotnet-suresh. It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies
It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

19 comments :

Anonymous said...

Hi Suresh,

Another great post!

How can we make it more simple to use!? So that we can add this on every page of the site!?

Thanks,
Jack.

Anonymous said...

excellent.. thanks for sharing.

-
Vinay

sayed farhan said...

very useful work
thanks for sharing

Anonymous said...

great one! thank you.
i have one concern; to have the revealed text allow tags in the text for new lines.
would you know how?

-

:•D

Anonymous said...

okay so i added style=white-space: pre to the div, however now the revealed text does not allow links or tables etc.
Any ideas?

-

:•|

Anonymous said...

how to slide up and down on the click of more and less link. i want to slide up and down the text rather thn show and hide........

venky said...

Great.. Its working.. But br tag is not working inside div...

Unknown said...

super!! thanks alot :)

Anonymous said...

thanks...... it helped me

manas singh said...
This comment has been removed by a blog administrator.
mark said...

can i prevent that the function kills my html text?

Unknown said...

It works good... but styles are not working inside the div... can any one help me.... pls

Anonymous said...

You are great nice post, but your post is so long and lenthi.

amrit prabhaker said...

nice post. I will try. I hope I got what i was looking for.thanks

amrit prabhaker said...

nice post. I will try. I hope I got what i was looking for.thanks

Anonymous said...

Links, p not working...Help

Anonymous said...

it is not working from second page of datatables contents

Anonymous said...

Anybody has a solution???

Unknown said...

sir, your code is not working on datatable pagination in c# also replace code from '$('.moretext').click(function () {' to $('body').on('click', '.moretext', function () { .
but still not working

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.