"Show More" Link Using JQuery

In this tutorial we will show you how to create jquery show more text or less text functionality for your web page or web application. If the text is larger than few characters, the extra words are hide and a show more link is presented to user. This way you can keep long text out of the view to user and stop the cluttering of page. Also interested users can click on more link and see the full content.

The HTML

<div class="comment more">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum laoreet, nunc eget laoreet sagittis,
quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
Duis eget nisl orci. Aliquam mattis purus non mauris
blandit id luctus felis convallis.
Integer varius egestas vestibulum.
Nullam a dolor arcu, ac tempor elit. Donec.
</div>
<div class="comment more">
Duis nisl nibh, egestas at fermentum at, viverra et purus.
Maecenas lobortis odio id sapien facilisis elementum.
Curabitur et magna justo, et gravida augue.
Sed tristique pellentesque arcu quis tempor.
</div>

 The CSS

a {
color: #0254EB
}
a:visited {
color: #0254EB
}
a.morelink {
text-decoration:none;
outline: none;
}
.morecontent span {
display: none;
}
.comment {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}

 The Javascript

• showChar: Total characters to show to user. If the content is more then showChar, it will be split into two halves and first one will be showed to user.
• ellipsestext: The text displayed before “more” link. Default is “…”
• moretext: The text shown in more link. Default is “more”. You can change to “>>”
• lesstext: The text shown in less link. Default is “less”. You can change to “<<"

$(document).ready(function() {
var showChar = 100;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
var content = $(this).html();

if(content.length > showChar) {

var c = content.substr(0, showChar);
var h = content.substr(showChar-1, content.length - showChar);

var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<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;
});
});