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.

Why are you showing an input in your question, but using button elements in your linked demo? — David Thomas
– David Thomas, Commented Jan 19, 2014 at 10:06

justtal · Accepted Answer · 2014-01-19 09:16:45Z

15

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.

answered Jan 19, 2014 at 9:16

justtal

8001 gold badge7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Skotlive Over a year ago

should I change this as well $("a[href='" + window.location.hash + "']").parent(".answerbutton").click(); not working in wordpress but it is fine in jsfiddle.

justtal Over a year ago

In the jsfiddle attached you don't have any a tag. What does it suppose to do?

justtal Over a year ago

OK, you want the question to be open by the href and location?

justtal Over a year ago

it supposed to be window.location.href (for all url) or window.location.href.hash (only for the hash)

justtal Over a year ago

use: $(this).parent().next('.toggle_container').slideToggle("fast");

|

CRABOLO · Accepted Answer · 2014-01-19 08:30:30Z

6

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

edited Jan 19, 2014 at 8:30

answered Jan 19, 2014 at 8:22

CRABOLO

8,82439 gold badges47 silver badges68 bronze badges

2 Comments

Skotlive Over a year ago

Thanks, it really worked, but when I click it again, it does not revert to Show answer text.

Skotlive Over a year ago

Thanks, still I am unable to get it :( sorry for being naive. Please see this fiddle, only third button is working not the first two ones.jsfiddle.net/cED6c/10

mercury · Accepted Answer · 2016-03-30 00:57:00Z

1

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

answered Mar 30, 2016 at 0:57

mercury

2,7795 gold badges33 silver badges45 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related