Post
Ask Question

Hide Or Unhide Element Using Jquery

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>     
  5.           
  6. </head>      
  7. <body>      
  8.            
  9.     <input type="button" value="Hide Box" class="button-hide" />      
  10.     <input type="button" value="Show Box" class="button-show" />    
  11.    
  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>      
  16.            
  17.         $(document).ready(function() {                    
  18.             $('.button-show').click(function(){                  
  19.                 $("#box").show();       
  20.        
  21.             });      
  22.        
  23.             $('.button-hide').click(function(){      
  24.        
  25.                  
  26.                 $("#box").hide();       
  27.        
  28.             });      
  29.         });      
  30.        
  31.     </script>      
  32.        
  33. </body>      
  34. </html>  
Next Recommended Reading Show And Hide Password Using jQuery In ASP.NET