Elements को Show और Hide करना
show method किसी hidden element को visible बना देता है।
In this page:
Syntax
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
$(selector).toggle(speed, callback);show()
show() call करना display:none वाले किसी element को तुरंत reveal कर देता है, उसकी normal display value restore करते हुए। बिना duration argument के, बदलाव बिना किसी animation के तुरंत होता है।
उदाहरण: 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() किसी element की display को तुरंत none set कर देता है, इसे page के layout से पूरी तरह हटाते हुए -- visibility या opacity बदलने के उलट, hidden elements अब कोई जगह नहीं लेते।
उदाहरण: 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() किसी element की current visibility check करता है और इसे opposite state में बदल देता है, इसलिए वही call एक hidden element को दिखाता है और एक visible element को छुपाता है, जो किसी panel को खोलने और बंद करने वाले buttons के लिए ideal है।
उदाहरण: 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
milliseconds में एक duration, या slow या fast जैसा keyword pass करना show() और hide() को instant snap के बजाय एक smooth animated transition में बदल देता है।
उदाहरण: 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>Toggle करने के लिए Click
किसी target element पर .toggle() call करने के लिए button के click handler को जोड़ना FAQ answers या dropdown menus जैसे simple show/hide UI बनाने के सबसे common jQuery patterns में से एक है।
उदाहरण: 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. #}
आम गलतियां
- किसी stylesheet
display:noneसे hidden element पर.show()call करना और edge cases में हैरान होना, जबकि.show()inline display set करता है और एक ज़्यादा specific CSS rule से override हो सकता है। .hide()इस्तेमाल करना और उम्मीद करना कि element अपनी जगह बनाए रखेगा; यह इसे layout से हटा देता है,visibility:hiddenके उलट।- गलत form में एक speed pass करना, जैसे
.hide("1s"), जबकि इसे milliseconds जैसे.hide(1000)या"slow"या"fast"होना चाहिए।
🔒
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: