jQuery Effects - Hide and Show
You can show and hide HTML elements using the jQuery show() and hide() methods.- show() – Display the matched elements.
- hide() – Hide the matched elements.
$("#btnHide").click(function(){
$("p").hide();
});
$("#btnShow").click(function(){
$("p").show();
});
<p>Click "Hide Message" !!</p>
<button id="btnHide">Hide Message </button>
<button id="btnShow">Show Message</button>
Browser ViewClick "Hide Message" !!
<html>
<head>
<title>jQuery Show/Hide</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btnHide").click(function(){
$("p").hide();
});
$("#btnShow").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>Click "Hide Message" !!</p>
<button id="btnHide">Hide Message </button>
<button id="btnShow">Show Message</button>
</body>
</html>
jQuery show()
jQuery show() method is used to display the hidden html elements. Running the .show() method on an element that is already being shown has no effect. Syntax
$(selector).show(duration,callback);
- duration – optional string or number value (in milliseconds) that specifies duration of the animation will take.
- callback – optional function to be executed once the method’s execution is complete.
$("p").show();
You can pass a speed to the show() method which tells JQuery how long to show the element. If you want to specify the speed, you can simply pass in a string of either 'slow', 'normal', or 'fast' . If you'd rather be very specific, that is an option as well. Simply pass in a numeric value, and that value will be in milliseconds.
$("p").show('slow');
$("p").show('normal');
$("p").show('fast');
$("p").show(1000);
jQuery hide()
Syntax
$(selector).show(duration,callback);
- duration – optional string or number value (in milliseconds) that specifies duration of the animation will take.
- callback – optional function to be executed once the method’s execution is complete.
$("p").hide();
You can pass a speed to the hide() method which tells JQuery how long to show the element. If you want to specify the speed, you can simply pass in a string of either 'slow', 'normal', or 'fast' . If you'd rather be very specific, that is an option as well. Simply pass in a numeric value, and that value will be in milliseconds.
$("p").hide('slow');
$("p").hide('normal');
$("p").hide('fast');
$("p").hide(1000);
jQuery toggle()
jQuery toggle() method is used to change the to display or hide HTML elements. By combining this method with toggle, we made it so clicking the same button can make the item that appears disappear when the button is clicked once again. Syntax
$(selector).toggle(duration,callback);
- duration – optional string or number value (in milliseconds) that specifies duration of the animation will take.
- callback – optional function to be executed once the method’s execution is complete.
$("p").toggle();
You can pass a speed to the toggle() method which tells JQuery how long to show the element. If you want to specify the speed, you can simply pass in a string of either 'slow', 'normal', or 'fast' . If you'd rather be very specific, that is an option as well. Simply pass in a numeric value, and that value will be in milliseconds.
$("button").click(function(){
$("p").toggle();
});
<p>Show/Hide message using toggle()</p>
<button>Show/Hide Message </button>
Browser ViewShow/Hide message using toggle()
<html>
<head>
<title>jQuery Toggle</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>Show/Hide message using toggle()</p>
<button>Show/Hide Message </button>
</body>
</html>
Related Topics