Replacing Link Text On Hide/show

I'm sure this question will take one of you 3 seconds to answer but I'm stumped. After I have clicked 'Enable Tips' the text changes to 'Disable Tips' as expected, but after you cl

Solution 1:

In your click handler, you need to test for the current value and set it to the opposite. Since you're using jQuery already, you really ought to use it for everything.

$(function(){ // short-hand is cleaner, IMO
    $(".help").hide();
    $("#help_trigger")
        .text( "Enable Tips" )
        .click(function(){
            var $this = $(this);
            $(".help").toggle("400");
            if ($this.text().match(/Disable/i)) {
                $this.text("Enable Tips");
            }
            else {
                $this.text("Disable Tips");
            }
           returnfalse;
    });
});

Solution 2:

Just put this in place instead of your click function

$('a#help_trigger').click(function(){
   if ($(this).html().trim() == 'Disable Tips') {
      $(this).html('Enable Tips');
   } else { 
      $(this).html('Disable Tips');
   }
   returnfalse; 
})

This will toggle the value depending on what the current HTML is. Keep in mind that the HTML has to be exact! Otherwise use a variable to check state and switch.

Solution 3:

you can try something like this OR this

$("a#help_trigger").toggle(function (){

            $(this).text("Enable Tips");

        }, function(){

            $(this).text("disable Tips ");

        });

DEMO