CODEWITHSUNDEEP
javascriptjquerytoggle
rossmclenny
rossmclenny

Reputation: 37

Change HTML with jquery click - and then back to original HTML

I am looking to create my first web based jQuery app. I have acheived half of the result that I want. Updating my button to change to 'Hide Answer' once clicked, however I would like the button to change back to the original text of 'Show Answer' when the user clicks an activates the toggle...

$(".answer-button").click(function(){
   $(this).html("Hide Answer").prev().toggle();
});

jsfiddle included here;

https://jsfiddle.net/rossmclenny/51jg4f79/1/

Upvotes: 1

Views: 167

Answers (2)

Marc Salvetti
Marc Salvetti

Reputation: 362

you can test the visible property

$(".answer-button").click(function(){
    $(this).prev().toggle();
    if($(this).parent().find('#answer').is(':visible')){
        $(this).html("Hide Answer");
    }else{
       $(this).html("Show Answer");
    }
});

Upvotes: 1

Frenchy
Frenchy

Reputation: 17017

just do that by testing the text value:

    $(".answer-button").click(function () {
      if ($(this).text().includes("Show")) {
        $(this).html("Hide Answer").prev().toggle();
      } else {
        $(this).html("Show Answer").prev().toggle();
      }
    });

Upvotes: 1

Related Questions