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 Toggle Show Hide Effects
You can show hide toggle HTML elements like div, p, button tag using the jQuery show(), hide() and toggle() effect methods:
- jQuery Show() Method Effect
- jQuery Hide() Method Effect
- jQuery toggle() Method Effect
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>
You may like
- jQuery Text Method By Example
- Get and Set Input, Select box, Text, radio Value jQuery
- Duplicate Html Elements Using jQuery By Example
- jQuery | Event MouseUp By Example
- Event jQuery Mouseleave By Example
- jQuery Event Mouseenter Example
- Event jQuery MouseOver & MouseOut By Example
- keyup jquery event example
- Jquery Click Event Method with E.g.
- Event jQuery. Blur By Example
- jQuery form submit event with example
- keydown function jQuery
- List of jQuery Events Handling Methods with examples
- Jquery Selector by .class | name | #id | Elements
- How to Get the Current Page URL in jQuery
