CODEWITHSUNDEEP
jquerybuttontoggle
Skotlive
Skotlive

Reputation: 63

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

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.

Upvotes: 5

Views: 36425

Answers (3)

mercury
mercury

Reputation: 2755

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);
     });
});

Upvotes: 1

justtal
justtal

Reputation: 800

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.

Upvotes: 15

CRABOLO
CRABOLO

Reputation: 8793

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');
    }
});

Upvotes: 6

Related Questions