Change the text in a button using javascript? [duplicate]

Question

I have a FAQ list that works that way : there are several mini cards that contain a question (some text) and a button (let's say "see the answer"). When I click on the button, the answer to the question appears above the button. Then the button should not be a "see the answer" button, but a "close" one. I need a little help with that last part.

Here is what I have done :

<p>Question</p>
<div class="collapse" id="FAQ">
    <div class="well">
        Answer to the question
    </div>
</div>
<a class="btn" role="button" data-toggle="collapse" href="FAQ" aria-expanded="false" aria-controls="collapseExample">See the answer</a>

Side question : since this is a list and I'm going to have several "See the answer/Close" buttons, I would say I'm not allowed to use an id to make it work, am I ?

AgataB · Accepted Answer · 2016-07-28 12:29:20Z

1

You can dynamically set the text on the button by $(".btn").innerHTML = "new text to be displayed". Put this in your first click(function() {...}) function.

And no, never use the same id for multiple elements. Use classes instead. You can have multiple classes on one element. So for example you may have class="btn close" and then use toggleClass("close") to add it when it's not there, remove it when it is.

answered Jul 28, 2016 at 12:29

AgataB

6472 gold badges10 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Change the text in a button using javascript? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related