javascript - readmore if giving the opposite response to what I expect -
i using readmore
javascript in program , runs, answer not correct.
when click on "see more" gives less output , when click on "less" 'see more'. ie showing opposite of should be.
i tried changing code doesn't work properly.
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function() { // configure/customize these variables. var showchar = 50; // how many characters shown default var ellipsestext = "..."; var moretext = "show more >"; var lesstext = "show less"; $('.more').each(function() { var content = $(this).html(); if(content.length > showchar) { var c = content.substr(0, showchar); var h = content.substr(showchar, content.length - showchar); var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <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; }); }); </script> <title>jquery read more/less toggle example</title> </head> <body> <span class="more"> lorem ipsum dolor sit dolore magna aliqua.excepteur sint occaecat cupidatat anim id est laborum. </span> <br><br> <div class="more"> morbi placerat imperdiet arcu massa. in hac <a href="#">habitasse</a> platea dictumst. <em>convallis magna nunc</em>, id rhoncus massa ornare in. </div> </body> </html>
you put wrong text anchor in .morelink
click
handler. need change below:
$(".morelink").click(function(){ if($(this).hasclass("less")) { $(this).removeclass("less"); $(this).html(lesstext); } else { $(this).addclass("less"); $(this).html(moretext); } // rest of code here }
and display correct label in beginning, have change html content create on document load (moretext
lesstext
):
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + lesstext + '</a></span>';
then behave in way want, cut text correctly, have change code bit more.
Comments
Post a Comment