CODEWITHSUNDEEP
jqueryhtml
D V Yogesh
D V Yogesh

Reputation: 3700

read more and read less jquery issue

<p class="pra">

SimpleText is the native text editor for the Apple Macintosh OS in versions before OS X. SimpleText allows editing including text formatting (underline, italic, bold SimpleText is the native text editor for the Apple Macintosh OS in versions before OS X. SimpleText allows editing including text formatting (underline, italic, bold SimpleText is the native text editor for the Apple Macintosh OS in versions before OS X. SimpleText allows editing including text formatting (underline, italic, bold SimpleText is the native text editor for the Apple Macintosh OS in versions before OS X. SimpleText allows editing including text formatting (underline, italic, bold 

<script>
$(document).ready(function() {
if($('.pra').text().length >= 100) {
var txt= $('.pra').text();
var res =txt.slice(1,105);
//alert( res);
$('.pra').html(res+'.....'+'...<a class="readmore" href="#">&emsp;Read More</a>');
}
$('.readmore').on('click',function(){
$(this).parent('p.pra').html(txt+'.....'+'...<a class="readless" href="#">&emsp;Read Less</a>');
$('.readless').on('click',function(){
if($('.pra').text().length >= 100) {
var txt= $('.pra').text();
var res =txt.slice(1,105);
//alert( res);
$('.pra').html(res+'.....'+'...<a class="readmore" href="#">&emsp;Read More</a>');  
}
});
});
});
</script>

when i click Read more oppening full content if press Read Less it is showing less content up to this no problem but again second time i click Read More no action and no more content not displying Demo Link

Upvotes: 1

Views: 601

Answers (1)

Roxoradev
Roxoradev

Reputation: 893

Instead of:

$('.readmore').on('click',function(){...});

try with:

$('body').on('click','.readmore',function(){...});

Same with '.readless'

Also change txt.slice(1,105); with txt.slice(0,105);

Or your text will lose the first letter everytime

 
$(document).ready(function() {
 
 //alert('fddf');
 if($('.pra').text().length >= 100) {

  var txt= $('.pra').text();
   var res =txt.slice(0,105);
   //alert( res);
   $('.pra').html(res+'.....'+'...<a class="readmore" href="#">&emsp;Read More</a>');
   
}

        $('body').on('click','.readmore',function(){
              $(this).parent('p.pra').html(txt+'.....'+'...<a class="readless" href="#">&emsp;Read Less</a>');


        $('body').on('click','.readless',function(){
         if($('.pra').text().length >= 100) {

  var txt= $('.pra').text();
   var res =txt.slice(0,105);
   //alert( res);
   $('.pra').html(res+'.....'+'...<a class="readmore" href="#">&emsp;Read More</a>');
   
}

        });

 });
 });
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="pra">
SimpleText is the native text editor for the Apple Macintosh OS in versions before OS X. SimpleText allows editing including text formatting (underline, italic, bold SimpleText is the native text editor for the Apple Macintosh OS in versions before OS X. SimpleText allows editing including text formatting (underline, italic, bold SimpleText is the native text editor for the Apple Macintosh OS in versions before OS X. SimpleText allows editing including text formatting (underline, italic, bold SimpleText is the native text editor for the Apple Macintosh OS in versions before OS X. SimpleText allows editing including text formatting (underline, italic, bold
</p>

Upvotes: 2

Related Questions