Change button text (show / hide/ show) on click in jquery toggle

Question

I am working on this fiddle: http://jsfiddle.net/cED6c/7/ I want to make the button text change on click and I tried using the following code:

<input type="button" class="reveal" onClick="this.value=this.value=='Show Answer'?'Hide Answer':'Show Answer'" value="Show Answer">

However, it does not work. How should I implement this? Any help would be great.

Answer 1

You need to add this code:

if ($.trim($(this).text()) === 'Show Answer') {
    $(this).text('Hide Answer');
} else {
    $(this).text('Show Answer');        
}

You can see it at work:

http://jsfiddle.net/cED6c/13/

I add the trim function cause in the html you got space after the Show Answer.