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