jQuery Effects - Hide and Show
You can hide and show any HTML elements or part of text with using jquery.
jQuery hide() and show() Methods
The hide() method is used to hide (making invisible) an HTML element at runtime.
The show() method is used to show (making visible) an HTML element at runtime.
Syntax 1:- Basic syntax
$(selector).hide();
$(selector).show(); Syntax 2:- Complete syntax
$(selector).hide(speed,callback);
$(selector).show(speed,callback); The speed and callback parameters are optional.
The optional speed parameter, which can take the values "slow," "rapid," or milliseconds, determines how quickly the hiding/showing happens.
The optional callback parameter is a function to perform after completing the hide()
or show() operation (you will learn more about callback functions in a later chapter).
Example 1 :-
The hide() and show() functions in jQuery allow you to hide and reveal HTML elements :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#hide").click(function () {
$(".test").hide();
});
$("#show").click(function () {
$(".test").show();
});
$("#hide2").click(function () {
$(".test2").hide(1000);
});
$("#show2").click(function () {
$(".test2").show(1000);
});
});
</script>
</head>
<body>
<p class="test">If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
<br /><br />
<p class="test2">If you click on the "Hide 2" button, I will disappear slowly.</p>
<button id="hide2">Hide 2</button>
<button id="show2">Show 2</button>
</body>
</html> Output :-
If you click on the "Hide" button, I will disappear.
If you click on the "Hide 2" button, I will disappear slowly.
Note: In the Hide2 and Show2 button, we have used the speed parameter to make
hide and show slowly. The number "1000" is in milliseconds.
jQuery toggle() Method
The toggle() function may also be used to toggle an element's visibility between hidden and visible.
Syntax :-
$(selector).toggle(speed,callback); The speed and callback parameters are optional.
The optional speed parameter might be "slow," "rapid," or "milliseconds".
The optional callback parameter is a function that has to be run upon completion of toggle().
Example :-
The elements displayed are concealed and hidden :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#toggle").click(function () {
$("h4").toggle();
});
});
</script>
</head>
<body>
<h4>This is a h4 heading.</h4>
<h4>This also a h4 heading.</h4>
<button id="toggle">Toggle between hiding and showing</button><br />
</body>
</html> Output :-
This is a h4 heading.
This also a h4 heading.