In these examples I demonstrate how to hide text and add “read more” and “read less” links using jQuery. This applies to a single block of text, or multiple instances of text on the same page.
HTML
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. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</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. Integer
tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius
purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in.
Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>
</body>
</html>
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;
});
});
CSS
.morecontent span {
display: none;
}
.morelink {
display: block;
}
No comments:
Post a Comment