jQuery - Toggle .html text?

Question

Why won't this work?

http://jsfiddle.net/PdwJ6/

HTML

<a href="#" id="showMore">Before</a>

JS

$('#showMore').click(function() {

$(this).toggle(
function () {
    $(this).html('<a href="#">After</a>');},
function () {
    $(this).html('<a href="#">Before</a>');
});
});

Answer 1

Blender has the appropriate answer, but we can also generalize your question into a simple jQuery plugin:

$.fn.toggleText = function(t1, t2){
  if (this.text() == t1) this.text(t2);
  else                   this.text(t1);
  return this;
};

Your code would then look like:

$('#showMore').click(function(){
  $(this).toggleText('Before', 'After');
})

Answer 2

A simple solution for toggling after a click:

$('#showMore').on('click', function(){
    $(this).html() == "after" ? $(this).html('before') : $(this).html('after');
});