Raj Mehta Raj Mehta - 1 month ago 16
Javascript Question

Truncate paragraph first 100 character and hide rest content of paragraph to show/hide rest contenct with more/less link

I have paragraph which has more than 500 character. I want to get only initial 100 character and hide rest of it. Also I want to insert "More" link next to 100 character. On click of more link whole paragraph should display and edit text "More" to "Less" and on click "Less" it should toggle behavior. Paragraph is dynamically generated I cant wrap content of it using .wrap(). Here is example what I have and what I want.

This is what I have :

<p>It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is that
it has a more-or-less normal distribution of letters, as opposed to using 'Content
content here', making it look like readable English. Many desktop publishing packages
and web page editors now use Lorem Ipsum as their default model text.</p>


This is what I want when DOM loads

<p>It is a long established fact that a reader will be distracted by ..More</p>


This is what I want when user click "More"

<p>It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is that
it has a more-or-less normal distribution of letters, as opposed to using 'Content
content here', making it look like readable English. Many desktop publishing packages
and web page editors now use Lorem Ipsum as their default model text. ..Less</p>


When we click on "Less", it should revert what on click "More" has done.

I am using jQuery to split, slice and wrap substring into span which I want to hide but that doesn't work.

var title = $("p").text();
var shortText = jQuery.trim(title).substring(100, 1000).split(" ")
.slice(0, -1).join(" ") + "...More >>";
shortText.wrap('</span>');

Answer

Fiddle: http://jsfiddle.net/iambriansreed/bjdSF/

jQuery:

jQuery(function(){

    var minimized_elements = $('p.minimize');
    var minimize_character_count = 100;    

    minimized_elements.each(function(){    
        var t = $(this).text();        
        if(t.length < minimize_character_count ) return;

        $(this).html(
            t.slice(0,minimize_character_count )+'<span>... </span><a href="#" class="more">More</a>'+
            '<span style="display:none;">'+ t.slice(minimize_character_count ,t.length)+' <a href="#" class="less">Less</a></span>'
        );

    }); 

    $('a.more', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).hide().prev().hide();
        $(this).next().show();        
    });

    $('a.less', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).parent().hide().prev().show().prev().show();    
    });

});‚Äč