jQuery Hide and Show
Showing and hiding elements is one of the first things most people try with jQuery, and it is a great way to see the library working right away. With a single method call you can make a paragraph, an image, a menu, or a whole panel disappear and come back. In this lesson you will learn hide(), show(), and the handy toggle() method that flips between the two.
Hiding and showing elements
jQuery gives you two straightforward methods for controlling visibility: hide() removes an element from view, and show() brings it back. Behind the scenes, hide() simply sets the CSS display property to none, and show() restores the value the element had before. Because the element is set to display:none rather than being deleted, it keeps all of its data and event handlers, ready to reappear exactly as it was.
Basic hide() and show()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="hideBtn">Hide</button>
<button id="showBtn">Show</button>
<p>This is a paragraph.</p>
<script>
$("#hideBtn").click(function() {
$("p").hide();
});
$("#showBtn").click(function() {
$("p").show();
});
</script>
</body>
</html>Both methods accept an optional speed argument. Pass a number of milliseconds, or one of the keywords "slow" or "fast", and jQuery will animate the change instead of snapping instantly. You can also supply a callback function that runs the moment the animation finishes, which is useful when you want to chain the next step after an element has fully appeared or vanished.
Animated hide with a speed and callback
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="toggleBox">Toggle box content</div>
<p id="note" style="display:none;">This note starts hidden.</p>
<script>
$("#toggleBox").hide(1000, function() {
console.log("The box is now hidden.");
});
// "slow" and "fast" are shortcuts for 600ms and 200ms
$("#note").show("slow");
</script>
</body>
</html>Toggling with one method
Very often you want one button that hides an element if it is visible and shows it if it is hidden. Rather than tracking the state yourself, use toggle(). jQuery checks the current display value and switches to the opposite, so a single handler covers both cases.
One button to toggle visibility
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="toggleBtn">Toggle Panel</button>
<div class="panel">Panel content</div>
<script>
$("#toggleBtn").click(function() {
$(".panel").toggle(400);
});
</script>
</body>
</html>- hide() sets display to none and keeps the element in the DOM.
- show() restores the element's previous display value.
- toggle() switches between hidden and visible automatically.
- All three accept an optional speed (milliseconds, "slow", or "fast") and a callback.
- Calling hide() with no arguments happens instantly, with no animation.
Exercise: jQuery Hide/Show
What does calling .hide() on an element actually do to it?
