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>&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;
});

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>&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;
});

JS FIDDLE with current jquery

Hope somebody may help me out. Thank you.

• javascript
• jquery
• html

• 2 you can check this out jedfoster./Readmore.js – Md Ashaduzzaman Commented Feb 6, 2015 at 5:47

3 Answers 3

Something 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>&nbsp;<span>&nbsp;&nbsp;<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;
        });

});