Js:
var showChar = 250; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";
$('.rd-more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content;
var html = '<div style="display:block">' + c + '<span class="moreellipses">' + ellipsestext+ '</span></div><div class="more content" style="display:none">' + h + '</div><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).prev('.content').prev().toggle();
$(this).prev().toggle();
return false;
});
CSS:
.morecontent span {
display: none;
}
.morelink {
display: block;
}
html:
<div class= "rd-more">Content >/div>
var showChar = 250; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";
$('.rd-more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content;
var html = '<div style="display:block">' + c + '<span class="moreellipses">' + ellipsestext+ '</span></div><div class="more content" style="display:none">' + h + '</div><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).prev('.content').prev().toggle();
$(this).prev().toggle();
return false;
});
CSS:
.morecontent span {
display: none;
}
.morelink {
display: block;
}
html:
<div class= "rd-more">Content >/div>
No comments:
Post a Comment