Change button text and hide paragraph text using jQuery.

In this example we will see how to change the button text and show/hide the paragraph when user click on the button.

Example :

Click the above button to hide this paragraph.

Code :
<script language="javascript"> $(document).ready(function () { $("#btndisplay").on("click", function () { $("#ptext").toggle("slow"); if ($(this).val() == "Hide") $(this).val("Show"); else $(this).val("Hide"); }); }); </script>

jQuery toggle method is used to toggle the display of the object. i.e. if the selection is in visible state then it will hide the selection otherwise it will make it visible.

Source code:
<html> <head> <title>Change button text and hide paragraph text using jQuery.</title> </head> <body> <div style='border: solid 1px #f1f1f1; padding: 10px; margin: 10px 0;'> <input type="button" value="Hide" id="btndisplay" /> <p id="ptext">Click the above button to hide this paragraph.</p> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script language="javascript"> $(document).ready(function () { $("#btndisplay").on("click", function () { $("#ptext").toggle("slow"); if ($(this).val() == "Hide") $(this).val("Show"); else $(this).val("Hide"); }); }); </script> </div> </body> </html>