Introduction
In this article i will show you how to show 100 characters only from lots of words and remaining words or you can say characters are hide from see more words, just like facebook.com. In facebook.com website, when we post some article which is lengthy in words then facebook.com functionality hide words just after specified length behind the see more links. Now, today i will give an example of it.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Facebook See More and See Less</title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var sChar = 100;
var ellipsestxt = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function () {
var content = $(this).html();
if (content.length > sChar) {
var c = content.substr(0, sChar);
var h = content.substr(sChar - 1, content.length - sChar);
var html = c + '<span class="moreellipses">' + ellipsestxt + ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="facebookmorelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".facebookmorelink").click(function () {
if ($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<style>
a {
color: #0221ac;
}
a:visited {
color: #02abcd;
}
a.facebookmorelink {
text-decoration: none;
outline: none;
}
.morecontent span {
display: none;
}
.facebookseemore {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}
</style>
</head>
<body>
<div class="facebookseemore more">
<h1>Health Tips</h1>
Fat on face or double chin suits on a person till a limited age only.
As age of a person increases fat free face is considered more beautiful.
Some girls do not like their fatty cheeks because it makes them look fat.
Fat on face can increase because of many reasons like lack of water, presence
of fat in diet and other fatty products. And for hiding it you may do make up
but it is not the thing which gets hided easily. Today
we are going to tell you about some such tips which can reduce fat from your face at a great extent.
</div>
</body>
</html>
Code Generate the following output
In this article i will show you how to show 100 characters only from lots of words and remaining words or you can say characters are hide from see more words, just like facebook.com. In facebook.com website, when we post some article which is lengthy in words then facebook.com functionality hide words just after specified length behind the see more links. Now, today i will give an example of it.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Facebook See More and See Less</title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var sChar = 100;
var ellipsestxt = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function () {
var content = $(this).html();
if (content.length > sChar) {
var c = content.substr(0, sChar);
var h = content.substr(sChar - 1, content.length - sChar);
var html = c + '<span class="moreellipses">' + ellipsestxt + ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="facebookmorelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".facebookmorelink").click(function () {
if ($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<style>
a {
color: #0221ac;
}
a:visited {
color: #02abcd;
}
a.facebookmorelink {
text-decoration: none;
outline: none;
}
.morecontent span {
display: none;
}
.facebookseemore {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}
</style>
</head>
<body>
<div class="facebookseemore more">
<h1>Health Tips</h1>
Fat on face or double chin suits on a person till a limited age only.
As age of a person increases fat free face is considered more beautiful.
Some girls do not like their fatty cheeks because it makes them look fat.
Fat on face can increase because of many reasons like lack of water, presence
of fat in diet and other fatty products. And for hiding it you may do make up
but it is not the thing which gets hided easily. Today
we are going to tell you about some such tips which can reduce fat from your face at a great extent.
</div>
</body>
</html>
Code Generate the following output
