Post
Ask Question

Hide or Unhide Element using Jquerry

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

This can be done using various client Side Scripting.today ,we will do that using Jquerry.
  1. <!doctype html>    
  2. <html>    
  3. <head>    
  4.     
  5.     <title>How to hide/show an element using jQuery show/hide effects</title>    
  6.     
  7.     
  8. </head>    
  9. <body>    
  10.         
  11.     <input type="button" value="Hide Box" class="button-hide" />    
  12.     <input type="button" value="Show Box" class="button-show"  />    
  13.         
  14.     <div id="box">Box</div>    
  15.     
  16.         
  17.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>    
  18.     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>    
  19.     
  20.     <script>    
  21.     
  22.            
  23.         $(document).ready(function() {    
  24.                 
  25.                 
  26.             $('.button-show').click(function(){    
  27.                     
  28.                    
  29.                 $("#box").show();     
  30.     
  31.             });    
  32.     
  33.             $('.button-hide').click(function(){    
  34.     
  35.               
  36.                 $("#box").hide();     
  37.     
  38.             });    
  39.         });    
  40.     
  41.            
  42.     
  43.     </script>    
  44.     
  45. </body>    
  46. </html>