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.

Answer 2

Very easy to change the text using jQuery.

Working example here. http://jsfiddle.net/vp7Y7/

$('.reveal').click(function() {
    if ($(this).text() === 'Show Answer') {
         $(this).text('This is NEW TEXT!!! It Worked!');
    }
    else {
        $(this).text('Show Answer');
    }
});

Answer 3

something easy like this

 $(document).ready(function () {
    $('a.edit').click(function () {
        var txt = $(this).text();
        txt = (txt !='cancel') ? 'cancel' : 'edit';
        $(this).text(txt);
        $('.editForm').toggle(300);
     });
});