Sometimes we need to hide/Unhide some part of a webpage from the client side depending on Input.

This can be done using various client side scripting.T oday ,we will do that using Jquerry

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>How to hide/show an element using jQuery show/hide effects</title>
  6. </head>
  7. <body>
  9. <input type="button" value="Hide Box" class="button-hide" />
  10. <input type="button" value="Show Box" class="button-show" />
  12. <div id="box">Box</div>
  13. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  14. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  15. <script>
  17. $(document).ready(function() {
  18. $('.button-show').click(function(){
  19. $("#box").show();
  21. });
  23. $('.button-hide').click(function(){
  26. $("#box").hide();
  28. });
  29. });
  31. </script>
  33. </body>
  34. </html>