Show more link not detecting character limit

Question

I was trying to add the show more link at the end of my paragraph but the more link is not appearing correctly or not truncating at the right character count.

Code here: https://jsfiddle.net/7sp0mpp8/

$(document).ready(function() {


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

Answer 1

You had 3 main problems here:

1. Forget to include jQuery library
2. Getting substring into h variable was bad - it was taking last character from c variable as well
3. Finally you missed to add display: none (or something similar) to your <span> with hidden additional content.

Fixed version

$(document).ready(function() {

    var showChar = 30;
    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, content.length - showChar);

            var html = c + '<span class="moreelipses">'+ellipsestext+'</span><span class="morecontent"><span style="display:none;">' + 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;
    });
});

https://jsfiddle.net/7sp0mpp8/2/

Answer 2

Add Jquery and then you need a little fix that is to hide the css for morecontent intially. Add $(".morecontent").css('display', 'none'); and also add the morecontent class to the inner rathe than the outer span like

var html = c + '<span class="moreelipses">'+ellipsestext+'</span><span ><span class="morecontent">' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

Complete snippet.

$(document).ready(function() {
    var showChar = 300;
    var ellipsestext = "";
    var moretext = "more";
    var lesstext = "less";
    $('.more').each(function() {
        var content = $(this).text();
    console.log(content.length)
        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);
      console.log(c);
            var html = c + '<span class="moreelipses">'+ellipsestext+'</span><span ><span class="morecontent">' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

            $(this).html(html);
      $(".morecontent").css('display', 'none');
        }

    });

    $(".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;
    });
});

JSFIDDLE