How to change the text value of the button everytime it is being clicked?

Question

Below I have jquery code and table. The jquery code is to toggle the div element called "divrep" everytime the reply button is click. What I want is I want the reply button to change the text value everytime it is being click. So initially, the text value of the button is "Replie(s)". I want to change it to "Hide Replies" when it is click, and back to "Replie(s)" again when it's click again. How to add a script on my code to do this? Thanks...

Jquery:

$(function () {
  $('.Reply').click(function () {
  $(this).closest('p').next('.divrep').toggle(!$(this).closest('p').next('.divrep').is(":visible"));
   // How to insert a code here to change the text value of the reply button in every click?
 });
});

HTML:

<table id="mytable">  

    <tr >
        <td class="tdstyle" >

  <div style="font-weight:bold;">  @Html.DisplayFor(modelItem => item.name) </div> 

   <p class="comment more" style ="white-space: pre-line; margin-top:0px;margin-bottom:0px; border-radius: 4px 4px 4px 4px; max-width :500px; min-height :5px;  display :block; background-color: #CCCCFF">  @Html.DisplayFor(modelItem => item.comment) </p>
  <p> <input type="button" id="like" name="like" value="Like" style="color:blue;border:0px;background-color:inherit;cursor:pointer" /> <input type="button" class ="Reply" name="Reply" value="Replie(s)"  style="margin-bottom:0px;color:blue;border:0px;background-color:inherit;cursor:pointer" /></p>                                                                                                                                 
   <div id="divReply" class ="divrep" style="display:none; position:relative;left:50px; overflow:auto;margin-top:0px;margin-bottom:0px">
           <table>

                 <tr >

                     <td >
                         <div style="font-weight:bold;"> @Html.DisplayFor(modelItem => item2.name) </div> 

                     <p class="comment more" style ="margin-top:0px;margin-bottom:0px;white-space:pre-line; border-radius: 4px 4px 4px 4px; max-width :445px; min-height :5px;  display :block; background-color: #CCCCFF;">@Html.DisplayFor(modelItem => item2.reply)  </p>

                   </td>
                 </tr>

            </table>      

   <div> 
       <div class="editor-field" style="display:none; margin-bottom:5px;margin-top:5px">  
          <input type="text" id="comidvalue" name="id" class="id" value="@Html.DisplayFor(modelItem => item.Id)" />
       </div>

       <br />
       <input type="text" id="namerep" name="name" class="name" style="width:445px;resize:none" />

      <br />
      <textarea id="reply" name="reply" class="reply" style="width:445px;height:100px;resize:none" ></textarea>

         <br />

       <input type="button" class="postrep" value="Post Reply" name="butname" style="cursor:pointer" /> 

     </div>
            <br />

  </div>
        </td>       
    </tr>


</table>

Answer 1

You can try to set the text value using the visibility state of divrep

 $(function () { $('.Reply').click(function () { var $divrep = $(this).closest('p').next('.divrep').toggle(!$(this).closest('p').next('.divrep').is(":visible")); $(this).val($divrep.is(':visible') ? 'Hide Replie(s)' : 'Replie(s)') }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <table id="mytable"> <tr > <td class="tdstyle" > <div style="font-weight:bold;"> @Html.DisplayFor(modelItem => item.name) </div> <p class="comment more" style ="white-space: pre-line; margin-top:0px;margin-bottom:0px; border-radius: 4px 4px 4px 4px; max-width :500px; min-height :5px; display :block; background-color: #CCCCFF"> @Html.DisplayFor(modelItem => item.comment) </p> <p> <input type="button" id="like" name="like" value="Like" style="color:blue;border:0px;background-color:inherit;cursor:pointer" /> <input type="button" class ="Reply" name="Reply" value="Replie(s)" style="margin-bottom:0px;color:blue;border:0px;background-color:inherit;cursor:pointer" /></p> <div id="divReply" class ="divrep" style="display:none; position:relative;left:50px; overflow:auto;margin-top:0px;margin-bottom:0px"> <table> <tr > <td > <div style="font-weight:bold;"> @Html.DisplayFor(modelItem => item2.name) </div> <p class="comment more" style ="margin-top:0px;margin-bottom:0px;white-space:pre-line; border-radius: 4px 4px 4px 4px; max-width :445px; min-height :5px; display :block; background-color: #CCCCFF;">@Html.DisplayFor(modelItem => item2.reply) </p> </td> </tr> </table> <div> <div class="editor-field" style="display:none; margin-bottom:5px;margin-top:5px"> <input type="text" id="comidvalue" name="id" class="id" value="@Html.DisplayFor(modelItem => item.Id)" /> </div> <br /> <input type="text" id="namerep" name="name" class="name" style="width:445px;resize:none" /> <br /> <textarea id="reply" name="reply" class="reply" style="width:445px;height:100px;resize:none" ></textarea> <br /> <input type="button" class="postrep" value="Post Reply" name="butname" style="cursor:pointer" /> </div> <br /> </div> </td> </tr> </table> 

Answer 2

For <input> button, You can pass a function to the .val() method that checks the current value and returns the new value to be set accordingly:

$(".Reply").val(function(i, value){
    return (value=="Replie(s)") ? "Hide Replie(s)" : "Replie(s)"
});

---

For <button> elements, you can do the same using the .text() method.

Answer 3

Just add this to your JS (instead of your //commented line):

$(this).val($(this).val() == "Replie(s)" ? "Hide Replies" : "Replie(s)");

http://jsfiddle.net/the_julo/tnx5gd6u/2/