1. HTML
<html>
<head>
<title>jQuery
Read More/Less Toggle Example</title>
</head>
<body>
<span
class="more">
Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</span>
<br><br>
<div
class="more">
Morbi
placerat imperdiet risus quis blandit. Ut lobortis elit luctus,
feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo
lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac
<a href="#">habitasse</a> platea dictumst.
</div>
</body>
</html>
2.
CSS
.morecontent
span {
display:
none;
}
.morelink
{
display:
block;
}
3.
JS
$(document).ready(function()
{
//
Configure/customize these variables.
var
showChar = 100; // How many characters are shown by default
var
ellipsestext = "...";
var
moretext = "Show more >";
var
lesstext = "Show less";
$('.more').each(function()
{
var
content = $(this).html();
if(content.length
> showChar) {
var
c = content.substr(0, showChar);
var
h = content.substr(showChar, content.length - showChar);
var
html = c + '<span class="moreellipses">' +
ellipsestext+ ' </span><span
class="morecontent"><span>' + h +
'</span> <a href=""
class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").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;
});
});
No comments:
Post a Comment