Showing and Hiding Elements
The show method makes a hidden element visible.
In this page:
Syntax
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
$(selector).toggle(speed, callback);show()
Calling show() instantly reveals an element that currently has display:none, restoring its normal display value. Without a duration argument, the change happens immediately with no animation.
Example: show()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<div id="box" style="display:none">Hidden content</div>
<button id="btn">Show</button>
<div id="output"></div>
</section>
<script>
var original = $("#demo").html();
function init() {
$("#btn").on("click", function() {
$("#box").show();
$("#output").text("Box shown");
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>hide()
hide() sets an element's display to none instantly, removing it from the page's layout entirely -- unlike changing visibility or opacity, hidden elements no longer take up any space.
Example: hide()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box">Visible content</div>
<button id="btn">Hide</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#box").hide();
$("#output").text("Box hidden");
});
$("#resetBtn").on("click", function() {
$("#box").show();
$("#output").text("Box shown again");
});
</script>
</body>
</html>toggle()
toggle() checks an element's current visibility and switches it to the opposite state, so the same call shows a hidden element and hides a visible one, which is ideal for buttons that flip a panel open and closed.
Example: toggle()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#panel { background: steelblue; color: #1a1a1a; padding: 10px; border-radius: 4px; }
</style>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<div id="panel">Panel content</div>
<button id="btn">Toggle</button>
<div id="output"></div>
</section>
<script>
var original = $("#demo").html();
function init() {
$("#btn").on("click", function() {
$("#panel").toggle();
$("#output").text($("#panel").is(":visible") ? "Panel visible" : "Panel hidden");
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Speed
Passing a duration in milliseconds, or a keyword like slow or fast, turns show() and hide() from an instant snap into a smooth animated transition instead.
Example: Speed
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box">Content</div>
<button id="btn">Hide Slowly</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text("Hiding...");
$("#box").hide("slow", function() {
$("#output").text("Hidden");
});
});
$("#resetBtn").on("click", function() {
$("#box").show();
$("#output").text("");
});
</script>
</body>
</html>Click to Toggle
Wiring a button's click handler to call .toggle() on a target element is one of the most common jQuery patterns for building simple show/hide UI like FAQ answers or dropdown menus.
Example: Click to Toggle
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#answer { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<button id="faqBtn">What is jQuery?</button>
<p id="answer" style="display:none">A JavaScript library.</p>
<div id="output"></div>
</section>
<script>
var original = $("#demo").html();
function init() {
$("#faqBtn").on("click", function() {
$("#answer").toggle();
$("#output").text($("#answer").is(":visible") ? "Answer shown" : "Answer hidden");
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Calling
.show()on an element hidden by a stylesheetdisplay:noneand being surprised in edge cases, when.show()sets the inline display and can be overridden by a more specific CSS rule. - Using
.hide()and expecting the element to keep its space; it removes it from layout, unlikevisibility:hidden. - Passing a speed in the wrong form, such as
.hide("1s"), when it must be milliseconds like.hide(1000)or"slow"or"fast".
🔒
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: