Jquery Toggle Text?

Question

Does anybody know how to toggle text the html text of an anchor tag using Jquery. I want an anchor that when clicked the text alternates between "Show Background" & "Show Text" as well as fading in & out another div. This was my best guess:

$(function() {
    $("#show-background").click(function () {
    $("#content-area").animate({opacity: 'toggle'}, 'slow'); 
});

$("#show-background").toggle(function (){
    $(this).text("Show Background")
    .stop();
}, function(){
    $(this).text("Show Text")
    .stop();
});
});

Thanks in advance.

Answer 1

$(function() {
    $("#show-background").click(function () {
        $("#content-area").animate({opacity: 'toggle'}, 'slow'); 
    });

    var text = $('#show-background').text();
    $('#show-background').text(
        text == "Show Background" ? "Show Text" : "Show Background");
});

Toggle hides or shows elements. You could achieve the same effect using toggle by having 2 links and toggling them when either is clicked.

Answer 2

Modifying my answer from your other question, I would do this:

$(function() {
 $("#show-background").click(function () {
  var c = $("#content-area");
  var o = (c.css('opacity') == 0) ? 1 : 0;
  var t = (o==1) ? 'Show Background' : 'Show Text';
  c.animate({opacity: o}, 'slow');
  $(this).text(t);
 });
});

Answer 3

Sorry the problem is me! the was out of sync but this was because I have the HTML text the wrong way around. On the first click I want the div to fade out and the text to say "Show Text".

Will check more thoroughly next time before I ask!

My code is now:

$(function() {
        $("#show-background").toggle(function (){
            $("#content-area").animate({opacity: '0'}, 'slow')
            $("#show-background").text("Show Text")
            .stop();
        }, function(){
            $("#content-area").animate({opacity: '1'}, 'slow')
            $("#show-background").text("Show Background")
            .stop();
        });
    });

Thanks again for the help!