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

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

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

-

:•|

Manish Sharma 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...

Rohini Suba said...

super!! thanks alot :)

Anonymous said...

thanks...... it helped me

manas singh said...

Hi,

You can get another link for how Less and More Content

http://www.discussdesk.com/jquery-show-less-and-more-content.htm

Give your Valuable Comments

Other Related Posts

© 2010-2012 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.