CODEWITHSUNDEEP
jquerytoggle
HeyImArt
HeyImArt

Reputation: 538

Jquery toggle show and hide text change

I've been hunting for awhile now and I just can't find an answer or get this to work as I want.

Right now I have some content which is hidden, then expands down when clicked on "Read More" But when its been clicked, I would like that text to be changed to "Less" or "Hide" or something.

Here is my code.

$(document).ready(function () {
    $('.moreinfo').hide();
    $('.more').click(function () {
        $('#info'+$(this).attr('target')).toggle(500);
        return false;
    });  
});

Then that goes to this html

<p class="moreinfo" id="info1">CONTENT HERE</p>
<a class="more" target="1">Read More</a>

Any help is greatly appreciated! Thank you.

Upvotes: 1

Views: 12640

Answers (3)

Atif
Atif

Reputation: 1

function slidtogl_contnt(id1){
    $("#"+id1).slideToggle();
    var txt = $("#more_txt").text();
    if(txt == 'More....'){
      $("#more_txt").text('Less....');
    }
    else{
      $("#more_txt").text('More....');
    }
  }

Upvotes: 0

Thilanka De Silva
Thilanka De Silva

Reputation: 1088

$(document).ready(function(){
  $("#div1").click(function(){
    $(this).text($(this).text() == 'More' ? 'Less' : 'More'); 
    $("#div2").slideToggle("slow");

  });
});

Upvotes: 3

Ejaz
Ejaz

Reputation: 8872

You can use callbacks here jsfiddle

        $('.moreinfo').hide();
        $('.more').click(function (ev) {
           var t = ev.target
           $('#info' + $(this).attr('target')).toggle(500, function(){
              $(t).html($(this).is(':visible')? 'I\'m done reading more' : 'Read more')
           });
           return false;
        });

You can read more about jQuery.toggle(), here

Upvotes: 9

Related Questions