SOCIALIZE IT

Thursday 25 July 2013

Read More HTML ( Dynamically shortened Text with Show More link using jQuery )

<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<TITLE>Dynamically shortened Text with Show More link using jQuery</TITLE>
<STYLE>
body, input{
font-family: Calibri, Arial;
margin: 0px;
padding: 0px;
}
a {
color: #0254EB
}
a:visited {
color: #0254EB
}
#header h2 {
color: white;
background-color: #00A1E6;
margin:0px;
padding: 5px;
}
.comment {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}
a.morelink {
text-decoration:none;
outline: none;
}
.morecontent span {
display: none;

}
</STYLE>
</HEAD>
<BODY>


<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>

</BODY>
<SCRIPT>
$(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="moreelipses">'+ellipsestext+'</span>&nbsp;<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;
});
});
</SCRIPT>
</HTML>

No comments:

Post a Comment