jQuery Toggle Show Hide Effects
![jQuery In Arabic ] #04 - Effects - Hide / Show / Toggle - YouTube](https://i.ytimg.com/vi/ZRupJrMllAQ/maxresdefault.jpg)
jQuery show hide toggle method; Through this tutorial, you will learn how to use jQuery show hide toggle method for hide, show, and toggle HTML (div, p, h1…h6, span tag) elements on click.
If you are working with HTML elements and you have to toggle your HTML elements like div, p tag, h1..h6 tag, span tag, button tag, etc. on click and Hide or Show or toggle. Then this tutorial is for you.
jQuery Show() Method 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() Method 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 & 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() Method Effect
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>
