jQuery Toggle Text?

$(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.

The most beautiful answer is...Extend jQuery with this function...

$.fn.extend({    toggleText: function(a, b){        return this.text(this.text() == b ? a : b);    }});

HTML:

<button class="example"> Initial </button>

Use:

$(".example").toggleText('Initial', 'Secondary');

I've used the logic ( x == b ? a : b ) in the case that the initial HTML text is slightly different (an extra space, period, etc...) so you'll never get a duplicate showing of the intended initial value

(Also why I purposely left spaces in the HTML example ;-)

Another possibility for HTML toggle use brought to my attention by Meules [below] is:

$.fn.extend({        toggleHtml: function(a, b){            return this.html(this.html() == b ? a : b);        }    });

HTML:

<div>John Doe was an unknown.<button id='readmore_john_doe'> Read More... </button></div>

Use:

$("readmore_john_doe").click($.toggleHtml(    'Read More...',     'Until they found his real name was <strong>Doe John</strong>.'));

(or something like this)

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!