CODEWITHSUNDEEP
javascriptjqueryhtml
Loc Dai Le
Loc Dai Le

Reputation: 1697

Show x characters from a text and when click on a href show the rest with linebreak

I can show x characters from a text and when I click on a href I show the rest of the text, but in my text I have one or more linebreaks <br>, but this linebreak is not shown. Is there a way I can solve this - thank you

HTML:

<div class="minimize">
                    sfjsdlhfljfksljlkglsdøfjklfdhklsfjsdgfdjklfjsklfjghfklsdfjsdlghf
                    sdfsdglkjfdghslkdfjsgjlskdøfjgslfkjgfsdklgjsfdgjsdg
                    sdgklsgjlsdøgjsklfdgjlsdjgfdjkgsdlgjdgjklsdjlgksjflkgjfdlkgjsldg
                    sdgklfdjgkfdhgklsdjgfdjhklf
                    <br>
                    sadsaøglsfdkjgsdøfsdjgdføgksøgfdgsd
                    gfdgklfdjklgfdjgfdøklgjhdlkjøhfdklfdøkjhdklhjfdøhjdfklhfd
                    fdhdkhlfdgjlhfdjfdklhkfdhfløgfdghordlhgrdlhdlregdjkldgj
                    fdgfdjlgkjfdghfdjhgirdlkfghrodøhgjghfdjkklghrsdgdl
            </div>

jQuery:

var minimized_elements = $('.minimize');

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

        $(this).html(
            t.slice(0,100)+'<span>... </span><a href="#" class="more">More</a>'+
            '<span style="display:none;">'+ t.slice(100,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();    
    });

Upvotes: 2

Views: 109

Answers (1)

Rajesh Kumar
Rajesh Kumar

Reputation: 2503

you can use jquery expander this Plugin hides (collapses) a portion of an element's content and adds a "read more" link so that the text can be viewed by the user if he or she wishes https://kswedberg.github.io/jquery-expander/

Upvotes: 3

Related Questions