Limited Text Show…
<HTML>
<HEAD>
<title>Limited Text Show</title>
<script type="text/javascript" src="jquery-latest.js"></script>
<STYLE>
.comment {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}
a.morelink {
text-decoration:none;
outline: none;
}
.morecontent span
{
display: none;
}
</STYLE>
<SCRIPT>
$(document).ready(function()
{
var showChar = 12;
var ellipsestext = "";
var moretext = "...";
var lesstext = ".";
$('.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> <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;
});
});
</SCRIPT>
</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.
</div>
</BODY>
</HTML>
No comments:
Post a Comment