Hide, Show and Toggle in jQuery


  • hide() method used to hide the selected Elements.
  • show() method used to display the hidden Elements.
  • toggle() method used to both hide and show. If the element is hidden it will be shown. If the element is displayed, it will be hidden.
hide() 
$(document).ready(function(){
  //Hidden without delay
  $("h1").hide();
  
  //Hidden with 200 milliseconds.
  $("h1").hide('fast');
  
  //Hidden with 600 milliseconds.
  $("h1").hide('slow');
  
  //Hidden with 3000 milliseconds.
  $("h1").hide(3000);
  
  //Hidden with callback function
  $("h1").hide(3000,function(){
	alert("Hide Complete");
  }); 
});
show() 
$(document).ready(function(){
  //Shows without delay
  $("h1").show();
  
  //Shows with 200 milliseconds.
  $("h1").show('slow');
  
  //Shows with 600 milliseconds.
  $("h1").show('fast');
  
  //Shows with 3000 milliseconds.
  $("h1").show(3000);
  
  //Shows with callback function
  $("h1").show(3000,function(){
    alert("show Complete");
  });
});
toggle() 
$(document).ready(function(){
  //Toggle without delay
  $("h1").toggle();
  
  //Toggle with 200 milliseconds.
  $("h1").toggle('slow');
  
  //Toggle with 600 milliseconds.
  $("h1").toggle('fast');
  
  //Toggle with 3000 milliseconds.
  $("h1").toggle(3000);
  
  //Toggle with callback function
  $("h1").toggle(3000,function(){
    alert("Toggle Complete");
  });
});

The following example shows, how to use hide(), show() and toggle() methods in jQuery.

Example 
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>   
  </head>
  <body>
    <input type='button' value='Hide' id='btn1'> 
    <input type='button' value='Show' id='btn2'> 
    <input type='button' value='Toggle' id='btn3'> 
    <h3>Hide and Show Example</h3>
  <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("h3").hide();
      });
      $("#btn2").click(function(){
        $("h3").show();
      });
      $("#btn3").click(function(){
        $("h3").toggle();
      });
    });
  </script>
  </body>
</html>
Try it Yourself

Demo