CODEWITHSUNDEEP
javascripthtmlcss
Andrew
Andrew

Reputation: 404

How to add read less button on my code after click on read more?

I need some help with my code.

So, I have a "read more" function, but I always have "Read more" text on that button, and I need to make "Read more" - "Read less" text, how can I add "Read less" text to my code, after click?

Here is my view:

<span class="small2" style="max-height: 120px"  class="col-md-6" align="justify" >{{ $review->review_message }}</span>

Here is my script:

$(".small2").each(function () {
    text = $(this).text();
    if (text.length > 200) {
        $(this).html(text.substr(0, 100) + '<span class="elipsis">' + text.substr(100) + '</span><a class="elipsis" href="#">Read more</a>' + 'salut');
    }

});
$(".small2 > a.elipsis").click(function (e) {
    e.preventDefault(); //prevent '#' from being added to the url
    $(this).prev('span.elipsis').fadeToggle(500);
});

Upvotes: 0

Views: 724

Answers (2)

Prawin soni
Prawin soni

Reputation: 452

I've made a snippet for your problem, look at it:

var readMore = true;

$(".small2").each(function () {
    text = $(this).text();
    if (text.length > 200) {
        $(this).html(text.substr(0, 100) + '<span class="elipsis">' + text.substr(100) + '</span><a class="elipsis" href="#"> Read more</a>');
        $('span.elipsis').fadeToggle(10);
    }

});
$(".small2 > a.elipsis").click(function (e) {
    e.preventDefault(); //prevent '#' from being added to the url
    $('span.elipsis').fadeToggle(500);
    $('a.elipsis').text(readMore ? 'Read less' : 'Read more');
    readMore = !readMore;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="small2" style="max-height: 120px"  class="col-md-6" align="justify" >sdfjg oshdlbf pisdb fipvsdb fgiphsdb fpvisdb fpihvsbd vspifb dpifhv sdpihfbv asipfhbv asiphfbv aipfsbvpishfv ishafv pias vfphas fvphs dfvp sdpfdpihf pdahvf psahbf jsabf piabfhidbv iphasb pvichasb dpihvab spvi bapifv aspihvdasjfnd[oashvdasdvc ackb vpasihc vpihfc dfhkzjcnv sdz csdkjcba spdjcn aspidbcv asipdb ashid sdfjg oshdlbf pisdb fipvsdb fgiphsdb fpvisdb fpihvsbd vspifb dpifhv sdpihfbv asipfhbv asiphfbv aipfsbvpishfv ishafv pias vfphas fvphs dfvp sdpfdpihf pdahvf psahbf jsabf piabfhidbv iphasb pvichasb dpihvab spvi bapifv aspihvdasjfnd[oashvdasdvc ackb vpasihc vpihfc dfhkzjcnv sdz csdkjcba spdjcn aspidbcv asipdb ashid </span>

Upvotes: 0

Mohammadreza Yektamaram
Mohammadreza Yektamaram

Reputation: 1502

Please try it: 

$(".small2 > a.elipsis").click(function (e) {
    e.preventDefault(); //prevent '#' from being added to the url
    $(this).prev('span.elipsis').fadeToggle(500);

    if ( $(this).text() == "Read more" )
      $(this).text('Read less');
    else
      $(this).text('Read more');

});

Upvotes: 2

Related Questions