jQuery More-Less

$.fn.moreless = function(options){
        var settings = {
            'showChar': 100,
            'ellipsestext': "...",
            'moretext': "Show more >",
            'lesstext':"Show less"
        };
        if (options) {
            $.extend(settings, options);
        }
        $(this).each(function() {
            var content = $(this).html();
            console.log({
                content:content,
                l:content.length
            })
            if(content.length > settings.showChar) {
                var c = content.substr(0, settings.showChar);
                var h = content.substr(settings.showChar, content.length - settings.showChar);
                var html = c + '<span class="moreellipses">' + settings.ellipsestext + '&nbsp;</span><span class="morecontent"><span class="hiddencontent">' + h + '</span>&nbsp;&nbsp;<a href="#" class="morelink">' + settings.moretext + '</a></span>';
                $(this).html(html);
            }
        });
        $(".morelink",$(this)).click(function(){
            if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(settings.moretext);
            } else {
                $(this).addClass("less");
                $(this).html(settings.lesstext);
            }
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });
        $('.morecontent span.hiddencontent').css('display','none');
    };
    
    $('body#test-item .caption').moreless({
        'showChar': 1192,
        'ellipsestext': "",
        'moretext': "+ <span>SHOW MORE<span>",
        'lesstext':"<span>SHOW LESS</span>"
    });