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

Question

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/

Why use a jsfiddle for this? Just use stackoverflow's builtin feature. — FSDford
– FSDford, Commented Nov 5, 2020 at 15:49

Marc Salvetti · Accepted Answer · 2020-11-05 15:54:25Z

1

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

answered Nov 5, 2020 at 15:54

Marc Salvetti

3621 silver badge10 bronze badges

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

Comments

Frenchy · Accepted Answer · 2020-11-05 15:52:24Z

1

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

answered Nov 5, 2020 at 15:52

Frenchy

17.1k3 gold badges21 silver badges42 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related