Jquery toggle setting the name of the caller link

Question

I know how to toggle but how do i change the name after the toggle happens and toggle between show and hide link

so here is my code

$(document).ready(function(){
    $('#show_review').click(function(){
      $('#show_something').toggle('slow');
    });
});

<a href='#' id="show_review">Show</a></p>

Answer 1

You'll be better off using the toggle event that accepts two functions. Then you can do whatever manipulations you want.

Try it out: http://jsfiddle.net/tDr4R/

$(document).ready(function(){
    $('#show_review').toggle(
       function() {
          $(this).text('Hide');
          $('#show_something').toggle('slow');
          return false;
       },
       function() {
          $(this).text('Show');
          $('#show_something').toggle('slow');
          return false;
       }
    );
});

If you don't have any other manipulations needed, another possibility is to pass a function to .text().

Try it out: http://jsfiddle.net/tDr4R/1/

$(document).ready(function(){
    $('#show_review').click(
       function() {
          $(this).text(function(i,text) { return (text == 'Show') ? 'Hide' : 'Show'; });
          $('#show_something').toggle('slow');
          return false;
       }
    );
});

Answer 2

Just replace the text with whatever you want:

$('#show_review').click(function(){
  $('#show_something').toggle('slow');
  if ($('#show_review').text() == 'Show')
    $('#show_review').text('Hide');
  else
    $('#show_review').text('Show');
});