Description:
Welcome to Jqueryjohn.com.
If you have a long text and you need to show
only a certain number of texts by default.
For this scenario, add one link with the
text content. If you want to expand the complete content, click on the “Show
More” link. You can shorten the long content using “Show Less” link.
To Shorten and expand content, there are lot
of plugins are available. I don’t think that a jquery plugin is required for
this. We can easily achieve with simple javascript code.
In the below example program, I have limited
the default text by 120 characters and the rest of the characters will hide by
default.
If you click on the Show More link,
it will expand the content and if you want to shorten the content click Show
Less link.
For live demo, click here.
Example program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script
type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js">
</script>
<script
type="text/javascript">
$(document).ready(function () {
var
defaultChar = 120;
var
joinText = "...";
$('.expand').each(function () {
var
textcontent = $(this).html();
if
(textcontent.length > defaultChar) {
var
defaultContent = textcontent.substr(0, defaultChar);
var
hiddenContent = textcontent.substr(defaultChar, textcontent.length -
defaultChar);
var
bindContent = defaultContent + '<span>'
+ joinText + ' </span><span
class="expandcontent"><span>' + hiddenContent + '</span> <a href=""
class="expandlink">' + "Show
More" + '</a></span>';
$(this).html(bindContent);
}
});
$(".expandlink").click(function () {
if
($(this).hasClass("less"))
{
$(this).removeClass("less");
$(this).html("Show More");
} else
{
$(this).addClass("less");
$(this).html("Show Less");
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return
false;
});
});
</script>
<style
type="text/css">
.expandcontent
span
{
display:
none;
}
.expand
{
width:
400px;
background-color:
#f0f0f0;
margin:
20px;
}
</style>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<div class="expand">
Welcome to Jqueryjohn.com. This is
Technical blog related to Scripting Languages.
Jqueryjohn.com offers jquery
related articles with code snippets. Jqueryjohn.com
also has jquery tutorials with
examples. It is easy to learn for beginners.
</div>
<div class="expand">
Welcome to Jqueryjohn.com. This is
Technical blog related to Scripting Languages.
Jqueryjohn.com offers jquery
related articles with code snippets. Jqueryjohn.com
also has jquery tutorials with
examples. It is easy to learn for beginners.
</div>
</div>
</form>
</body>
</html>
Shortened Text
With Show More Link Using JQuery, JQuery Add More or Less link to Text,
Dynamically Shortened text with “Show More” link, Shorten long content using
JQuery
0 comments:
Post a Comment