Table of Contents
Introduction
हेलो दोस्तों आज हम इस post में jquery के method से HTML elements को hide and show कैसे करा सकते है jquery के inbuilt function के इस्तेमाल से वो सब हम इस post में जानेगे example के साथ!.
Jquery hide and show effects
jQuery के hide() and show() methods के इस्तेमाल से HTML elements को hide और show करा सकते है!.
Jquery hide() method
jquery hide() method के मदद से HTML के selected element को hide करा सकते है!. hide() method css की property display: none की तरह ही work करता है क्योकि hide() method selected element में inline display: none css के property inline selected element में add कर देती है!.
syntax:
$(selector).hide(speed,callback);
hide() method में speed parameter के तोर पर fast, show और milliseconds parameter रख सकते है!.
Example:
<html>
<head></head>
<body>
<div class="info">
<h3>Hide effects</h3>
<p>The set hide effected using the hide() method using jquery</p>
</div>
<button class="button">Click & Hide</button>
</body>
</html>
Hide() method jquery example
<script>
$(docuemnt).ready(function(){
$('.button').click(function(){
$("div.info").hide();
});
})
</script>
hide() method speed/callback parameter
<script>
$(document).ready(function(){
// Hide displayed HTLM element with different speeds
$(".button").click(function(){
$("div.info").hide(); // or
$("div.info").hide("fast"); // or
$("div.info").hide("slow"); // or
$("div.info").hide(50); // or
$("div.info").hide(2000);
// you can set only on effect for the currunt selected selected element
});
});
</script>
With callback function
<script>
$(document).ready(function(){
$(".button").click(function(){
$("div.info").hide("slow", function(){
alert("The hide effect is completed.");
});
});
});
</script>
ऊपर के example में आप देख सकते है HTML element को jquery के मदद से button के click पर हमने div.info element hide करा हैi. साथ में ही उसके parameter के अनुसार example बी देखे!।
Jquery show() method
jquery show() method के मदद से HTML के hide element को show करा सकते है!. show() method css की property display: block की तरह ही work करता है क्योकि show() method selected element में inline display: block css के property inline selected element में add कर देती है!.
Syntax:
$(selector).show(speed,callback);
show() method में speed parameter के तोर पर fast, show और milliseconds parameter रख सकते है!.
Example:
<html>
<head></head>
<style>
.info{
display:none;
}
</style>
<body>
<div class="info">
<h3>show effects</h3>
<p>The set show effected using the show() method using jquery</p>
</div>
<button class="button">Click & show</button>
</body>
</html>
show() method jquery example
<script>
$(docuemnt).ready(function(){
$('.button').click(function(){
$("div.info").show();
});
})
</script>
show() method speed/callback parameter
<script>
$(document).ready(function(){
// show displayed HTLM element with different speeds
$(".button").click(function(){
$("div.info").show(); // or
$("div.info").show("fast"); // or
$("div.info").show("slow"); // or
$("div.info").show(50); // or
$("div.info").show(2000);
// you can set only on effect for the currunt selected selected element
});
});
</script>
With callback function
<script>
$(document).ready(function(){
$(".button").click(function(){
$("div.info").show("slow", function(){
alert("The show effect is completed.");
});
});
});
</script>
jquery toggle() method
jquery toggle() method के इस्तेमाल से HTML के hide element को show और shown element को hide करा सकते है!.
syntax:
$(selector).toggle(speed,callback);
toggle() method में speed parameter के तोर पर fast, show और milliseconds parameter रख सकते है!.
toggle method में callback function toggle complete होने के बाद में executed होता है!.
Example:
<html>
<head></head>
<style>
.info{
display:none;
}
</style>
<body>
<div class="info">
<h3>toggle effects</h3>
<p>The set toggle effected using the toggle() method using jquery</p>
</div>
<button class="button">Click & toggle</button>
</body>
</html>
toggle() method jquery example
<script>
$(docuemnt).ready(function(){
$('.button').click(function(){
$("div.info").toggle();
});
})
</script>
toggle() method speed/callback parameter
<script>
$(document).ready(function(){
// show displayed HTLM element with different speeds
$(".button").click(function(){
$("div.info").toggle(); // or
$("div.info").toggle("fast"); // or
$("div.info").toggle("slow"); // or
$("div.info").toggle(50); // or
$("div.info").toggle(2000);
// you can set only on effect for the currunt selected selected element
});
});
</script>
With callback function
<script>
$(document).ready(function(){
$(".button").click(function(){
$("div.info").toggle("slow", function(){
alert("The toggle effect is completed.");
});
});
});
</script>
