jQuery Hide/Show


jQuery show() and hide() Methods

The hide () and show () methods are used to hide and show an HTML element.

Syntax

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

The two parameters speed and callback are optional.

speed – This parameter is used to set the speed of hiding or showing. Its value can be “slow”, “fast” or milliseconds.

callback – Its value specifies the name of a function that will be executed when hide/show is completed.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").hide();
  });
   $(".btn2").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
 <p>This is paragraph tag.</p>
  <button class="btn1">Click here to hide p element</button>
  <button class="btn2">Click here to show p element</button>
</body>
</html>

jQuery toggle() Method

If we need to hide or show with a button, we can use toggle ().

Syntax

$(selector).toggle(speed,callback);

The two parameters speed and callback are optional.

speed – This parameter is used to set the speed of hiding or showing. Its value can be “slow”, “fast” or milliseconds.

callback – Its value specifies the name of a function that will be executed when hide/show is completed.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>
 <p>This is paragraph tag.</p>
  <button class="btn1">Click here to hide or show p element</button>
</body>
</html>