Read more and read less mixed up.

Question

I am trying to add read more / read less function to multi paragraph.

I use the following HTML and jquery. However if I click different 'read more' link, it does not work properly. 'read more' stay 'read more', or read more and read less texts become confused.

Could anyone tell me how to fix this?

Thanks in advance.

<div id="section1">
<div class="toppara">
<img src="images/toh_texture1a.jpg" width="90" height="90" alt="pic" />
<p>Content 1.  </p> 

</div>

<div class="morepara">
<img src="images/plucchini_texture02.jpg" width="90" height="90" alt="pic" />
<p>
Content 1-a.
</p>

</div>

<p class="togglebutn">
<a href="#">LESE MER</a>
</p>
</div><!-- section 1 -->

<!-- section 2 -->
<div id="section2">
<div class="toppara">
<img src="images/dandelion.jpg" width="90" height="90" alt="pic" />
<p>Content 2.  </p> 
</div>


<div class="morepara">
<img src="images/toh_texture1a.jpg" width="90" height="90" />
<p>
Content 2-a.  
</p>


</div>

<p class="togglebutn">
<a href="#">LESE MER</a>

</p>
 </div><!-- section 2 -->

<!-- section 3 -->
<div id="section3">
<div class="toppara">
<img src="images/plucchini_texture02.jpg" width="90" height="90" />
<p>Content 3.  </p> 
</div>


<div class="morepara">
<img src="images/dandelion.jpg" width="90" height="90" />
<p>
 Content 3-a. 
</p>


</div>

<p class="togglebutn">
<a href="#">LESE MER</a>

</p>
</div><!-- section 3 -->

<!-- section 4 -->
<div id="section4">

<div class="toppara">
<img src="images/toh_texture1a.jpg" width="90" height="90" />
<p>Content 4.  </p> 
</div>


<div class="morepara">
<img src="images/plucchini_texture02.jpg" width="90" height="90" />
<p>
Content 4-a. 
</p>


</div>

<p class="togglebutn">
<a href="#">LESE MER</a>

</p>
</div><!-- section 4 -->

<script language="javascript" type="text/javascript">

$(function() {
    // set a variable Toggled to false
    var Toggled=false; 

// Toggle a paragraph
 $('.togglebutn a').click(function(){ 
var $parentpara = $(this).parent().prev();
if(Toggled==false){$(this).html('<span class="readless">read less</span>');        Toggled=true;}
        else{$(this).html('<span class="readmore">read more</span>');Toggled=false;} 
  $parentpara.toggle('slow');
  return false; 
 });

});


</script>

Answer 1

The problem in your code is that only one Toggled var is used for all three paragraphs. You can avoid using the variable at all. Use

.toggleClass('readless').toggleClass('readmore').text($(this).text()=='read less' ? 'read more' : 'read less');

Haven't tested it, but something like this should do the trick.

Answer 2

I didn't have time to fully test this, but this should work for you. I removed your temporary variable (you shouldn't need it) and I'm using the hasClass to see if the span has readless or readmore defined.

$(document).ready(function(){
// Toggle a paragraph
    $('.togglebutn a').click(function(){ 
     var $parentpara = $(this).parent().prev();
     if ($(this > span).hasClass('readless')) {
      $(this).html('<span class="readmore">read more</span>');
     }
     else {
      $(this).html('<span class="readless">read less</span>');     
     }

        return false; 
    });
});

Answer 3

Thanks guys.

I solve the problem in two ways.

Fist solution. I used hasClass, romoveClass and addClass which I got a tip from Chris Brandsma. Thanks Chris.

$(function() {
  // Toggle a paragraph
 $('.togglebutn a').click(function(){ 
  var $parentpara = $(this).parent().prev();
  if ($(this).hasClass('readless')) {
            $(this).html('LESE MER').removeClass().addClass('readmore');
    }
    else {
            $(this).html('LESE MINDRE').removeClass().addClass('readless');     
    }
  $parentpara.slideToggle('fast');
  return false; 
 });

});

Second solution. I used here is attribute. I think someone may tell this is not a right way. But it works. Basically it is the same as the solution 1.

$(function() {
 // Toggle a paragraph
 $('.togglebutn a').click(function(){ 
  var $parentpara = $(this).parent().prev();
  var $titleattr = $(this).attr('title');
  if($titleattr=='readmore')   {$(this).attr('title','readless').html('<span class="readless">LESE MINDRE</span>');}
        else{$(this).attr('title','readmore').html('<span class="readmore">LESE MER</span>');} 
  $parentpara.toggle('slow');
  return false; 
 });

});