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.
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.
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> <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 Email
|
|||
19 comments :
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.
excellent.. thanks for sharing.
-
Vinay
very useful work
thanks for sharing
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
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?
-
:•|
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........
Great.. Its working.. But br tag is not working inside div...
super!! thanks alot :)
thanks...... it helped me
can i prevent that the function kills my html text?
It works good... but styles are not working inside the div... can any one help me.... pls
You are great nice post, but your post is so long and lenthi.
nice post. I will try. I hope I got what i was looking for.thanks
nice post. I will try. I hope I got what i was looking for.thanks
Links, p not working...Help
it is not working from second page of datatables contents
Anybody has a solution???
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
Note: Only a member of this blog may post a comment.