I have a content DIV
with many paragraphs.
This is how its' markup look,
<div class="more">
<p>Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. </p>
<p>That an extinct one-tonne relative of the ncisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. </p>
<p>Extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. </p>
</div>
Now I need to add a link to "read more" once the characters reach to 300 of <div class="more">
. And also I would like to display this link as a toggle.
Just I tried it with jquery, but I couldn't figure it out properly.
This is my jquery -
var showChar = 300;
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> <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;
});
JS FIDDLE with current jquery
Hope somebody may help me out. Thank you.
I have a content DIV
with many paragraphs.
This is how its' markup look,
<div class="more">
<p>Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. </p>
<p>That an extinct one-tonne relative of the ncisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. </p>
<p>Extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. </p>
</div>
Now I need to add a link to "read more" once the characters reach to 300 of <div class="more">
. And also I would like to display this link as a toggle.
Just I tried it with jquery, but I couldn't figure it out properly.
This is my jquery -
var showChar = 300;
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> <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;
});
JS FIDDLE with current jquery
Hope somebody may help me out. Thank you.
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Feb 6, 2015 at 5:20 TNKTNK 4,33315 gold badges62 silver badges82 bronze badges 1- 2 you can check this out jedfoster./Readmore.js – Md Ashaduzzaman Commented Feb 6, 2015 at 5:47
3 Answers
Reset to default 7Something like this will help keep <p>
and have 300 chars count.
var showChar = 300;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
var content = $(this).html();
var textcontent = $(this).text();
if (textcontent.length > showChar) {
var c = textcontent.substr(0, showChar);
//var h = content.substr(showChar-1, content.length - showChar);
var html = '<span class="container"><span>' + c + '</span>' + '<span class="moreelipses">' + ellipsestext + '</span></span><span class="morecontent">' + content + '</span>';
$(this).html(html);
$(this).after('<a href="" class="morelink">' + moretext + '</a>');
}
});
$(".morelink").click(function() {
if ($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
$(this).prev().children('.morecontent').fadeToggle(500, function(){
$(this).prev().fadeToggle(500);
});
} else {
$(this).addClass("less");
$(this).html(lesstext);
$(this).prev().children('.container').fadeToggle(500, function(){
$(this).next().fadeToggle(500);
});
}
//$(this).prev().children().fadeToggle();
//$(this).parent().prev().prev().fadeToggle(500);
//$(this).parent().prev().delay(600).fadeToggle(500);
return false;
});
.morecontent {
display: none;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="more">
<p>Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guins 30cm incisors
like tusks.</p>
<p>That an extinct one-tonne relative of the ncisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative guinea picm incisors like tusks.</p>
<p>Extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks.</p>
</div>
Edit: Snippet updated - Added Fade effects with <a href="morelink">
outside container
This is how you can acheive JSFIDDLE
var content = $(this).text();
//var content = $(this).html();
if the browser found any html tag break then its automatically enclosed with the related tag: </p>
.
May be below code snippet will help you :
$(document).ready(function(){
var showChar = 300;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
var h = "";
var content = $(".more").text();
if(content.length > showChar)
{
var c = content.substr(0, showChar);
h = content.substr(showChar-1, content.length - showChar);
var html = c + '<span class="moreelipses">'+ellipsestext+'</span> <span> <a href="" class="morelink">'+moretext+'</a></span>';
$(".more").html(html);
$('.morecontent').hide();
}
$(".morelink").click(function()
{
if($(this).hasClass("less"))
{
$('.more').remove(h);
$(this).removeClass("less");
$(this).html(moretext);
}
else
{
$('.more').append(h);
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});