Elements को Show और Hide करना
In this page:
$(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>
</head>
<body>
<div id="box" style="display:none">Hidden content</div>
<button id="btn">Show</button>
<script>
$("#btn").on("click", function() {
$("#box").show();
});
</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>
</head>
<body>
<div id="box">Visible content</div>
<button id="btn">Hide</button>
<script>
$("#btn").on("click", function() {
$("#box").hide();
});
</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>
</head>
<body>
<div id="panel">Panel content</div>
<button id="btn">Toggle</button>
<script>
$("#btn").on("click", function() {
$("#panel").toggle();
});
</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>
</head>
<body>
<div id="box">Content</div>
<script>
$("#box").hide("slow");
</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>
</head>
<body>
<button id="faqBtn">What is jQuery?</button>
<p id="answer" style="display:none">A JavaScript library.</p>
<script>
$("#faqBtn").on("click", function() {
$("#answer").toggle();
});
</script>
</body>
</html>- किसी 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: