Dynamically hide text with show more button

JavaScript
1

I am using the code below to shorten a large amount of text coming out of the database, its fine as long as there are no html tags being used, in my case opening and closing <p> tags, and there a few paragraphs. I can take the <p> tags out but its a bi lump of text then and doesn’t look good.

Is there anyway of the code below being adapted to allow the paragraph tags

$(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="moreellipses">' + ellipsestext+ '&nbsp;</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;
});
});
2

This is where I’m trying out the script, the more button appears, and its clickable and you get some change but because of the ‘p’ tags its not working correctly.

Its the large block of text at the top of the page

page

I’m guessing it’s to do with

var content = $(this).html();

But not sure how change it to accommodate the html that comes through.

3

Hi,

You can’t really split and join it like that because you can’t target the previous blocks easily. I would save a copy of the original text and then replace and show the orginal text instead of the truncated text.

Not very elegant but this works.

<script>
$(document).ready(function() {
    var showChar = 400;
    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 h = content;	
            var html = '<div style="display:block">' + c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span></div><div class="more content" style="display:none">' + h + '</div>&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).prev('.content').prev().toggle();
		$(this).prev().toggle();
        return false;
    });
});

</script>

You also seem to be loading 2 versions of jquery which should be avoided as they will conflict. Chance are you only need the latest version but if you need older features then you might be able to use the migrate plugin/.

I made a stand-alone example with a few small changes to show it working.

I’m sure it could be improved by the JS experts here :smile:

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.