jQuery Effects - Hide and Show
jQuery hide() and show()
You can use jQuery to make parts of a webpage disappear or reappear using the "hide()" and "show()" methods.
Syntax:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
You can use the "speed" option to control how quickly something appears or disappears. You can choose from three options: "slow," "fast," or you can specify the time in milliseconds.
The optional callback parameter is a function that runs once the hide() or show() method finishes its work. We'll explain callback functions more in a later part.
Here's an example that shows how the 'speed' parameter works with the hide() function:
jQuery toggle()
You can easily switch between making something disappear or appear using the toggle() method.
Visible elements become invisible, and invisible elements become visible:
Syntax:
$(selector).toggle(speed,callback);
You can choose how fast something happens using the "speed" option. You can set it to "slow," "fast," or a specific number of milliseconds.
The "optional callback parameter" is a function that runs once the toggle() action is finished.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#hide").click(function() {
$("p").hide();
});
$("#show").click(function() {
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle between hiding and showing the paragraphs</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
HTML
CSS
Javascript
Jquery