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+ '&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;     });   });   </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+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + lesstext + '</a></span>'; 

then behave in way want, cut text correctly, have change code bit more.


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -