jQuery toggle(), show() & hide() By Example

jQuery toggle(), show() & hide() By Example

Effect Show() / Hide() By jQuery – how to use this effects with html elements or webpages. We are going to show you with simple example how to use this effects. Here you will learn how to show hide HTML elements using jQuery effects.

You can show and hide HTML elements using the jQuery show() and hide() effect methods.

jQuery Show Effect

The jQuery show() effect method is used to show the selected Html elements.

Syntax

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

Parameters of Show Method

  • speed:- The argument ‘speed‘ determines the duration of this effect.
  • easing:- It specifies the easing function to be used for transition.
  • callback:- This is an optional parameter. you can specify what to do after the hide() method is called.

jQuery show() example

In the below example you can see that show() effect method.

<!DOCTYPE html>
<html>
<head>
<title> jQuery Show </title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>
$(document).ready(function(){
$(".btn-show").click(function(){
  $("#first").show();
  });
});
</script>
</head>
<body>

<h4 id="first" style="display: none"> Hide and Show - Speed</h4>
<button class="btn-show">Show</button>

</body>
</html>

jQuery show and callback example

<!DOCTYPE html>
<html>
<head>
<title> jQuery Show with callback</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>
$(document).ready(function(){
$(".btn-show").click(function(){
    $("#first").show(1000,"swing",function(){
      alert("Show() method is finished!");
    });
  });
});
</script>
</head>
<body>

<h4 id="first" style="display: none"> Hide and Show - Speed</h4>
<button class="btn-show">Show</button>

</body>
</html>

jQuery Hide Effect

The jQuery hide() effect method is used to hide the selected Html elements.

Syntax

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

Parameters of Hide() Method

  • speed:- The argument ‘speed‘ determines the duration of this effect.
  • easing:- It specifies the easing function to be used for transition.
  • callback:- This is an optional parameter. you can specify what to do after the hide() method is called.

jQuery Hide() example

<!DOCTYPE html>
<html>
<head>
<title> jQuery Hide Method </title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>
$(document).ready(function(){
  $(".btn-hide").click(function(){
  $("#first_hide").hide("fast");
  });

$(".btn-show").click(function(){
  $("#first_hide").show("fast");
  });
});
</script>
</head>
<body>

<h4 id="first_hide"> Hide and Show - Speed</h4>
<button class="btn-hide">Hide</button>
<button class="btn-show">Show</button>

</body>
</html>

jQuery hide and callback example

<!DOCTYPE html>
<html>
<head>
<title> jQuery Show &amp; Hide with callback</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>
$(document).ready(function(){
  $(".btn-hide").click(function(){
    $("#second").hide(1000,"swing",function(){
      alert("Hide() method is finished!");
    });
  });
$(".btn-show").click(function(){
    $("#second").show(1000,"swing",function(){
      alert("Show() method is finished!");
    });
  });
});
</script>
</head>
<body>

<h4 id="second"> Hide and Show - Speed</h4>
<button class="btn-hide">Hide</button>
<button class="btn-show">Show</button>

</body>
</html>

jQuery toggle

jQuery toggle() method is used to change the to show or hide HTML elements(like input, text, paragraph, div, image etc.). You can use the toggle method when you want to toggle between the hide and show of the selected HTML element.

Syntax

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

Parameters of Toggle() Method

  • speed:- The argument ‘speed‘ determines the duration of this effect.
  • easing:- It specifies the easing function to be used for transition.
  • callback:- This is an optional parameter. you can specify what to do after the hide() method is called.

jQuery toggle() example

In the below example you can see that the toggle() method takes an argument “fast” to toggle between hide and show the selected <p> tag element.

<!DOCTYPE html>
<html>
<head>
<title> jQuery Toggle </title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
$(document).ready(function(){
  $(".togglebtn").click(function(){
  $("#second").toggle("fast");
  });

});
</script>
</head>
<body>

<h4 id="second"> Hide and Show - Speed</h4>
<button class="togglebtn">Toggle</button>

</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *