One of the most popular uses for jQuery is creating simple visual effects. The
hide() and show() methods allow you to instantly control the
visibility of any element on your page with smooth, professional transitions.
The hide() method sets the CSS display property of an element
to none. This removes the element from the layout entirely.
$(selector).hide(speed, callback);Example: Hiding a paragraph when a button is clicked.
$("#hideBtn").click(function() {
$("p").hide();
});The show() method restores the element's visibility by resetting the
display property (usually to block or inline).
$(selector).show(speed, callback);The toggle() method is a powerful shortcut. It checks the current state of
an element: if it is shown, it hides it; if it is hidden, it shows it. This saves you
from writing complex if...else logic.
$("#toggleBtn").click(function() {
$("p").toggle();
});Both methods accept a **speed** parameter that controls how long the transition takes. You can use strings or milliseconds:
1000 for 1 second).// Hide with custom speed
$("#target").hide(1000); // Takes 1 second
$("#target").show("slow"); While you can hide elements with CSS display: none, jQuery's methods are
dynamic and include a "sliding and fading" effect that makes the transition look
smoother and more polished to the user.
toggle().The **callback** parameter is a function that runs *after* the hide or show effect is completely finished. This is useful for sequencing actions.
$("h1").hide("slow", function() {
alert("The heading is now gone!");
});hide()/show() for logic
that needs to be triggered by user events. For static hidden content, stick to plain CSS to avoid "flicker" on page load.
display property.