If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
किसी भी Element को hide या show करने के लिए jQuery हमें hide() and show() methods provide कराती है , जिनकी help से आसानी से element को hide / show कर सकते हैं।
Syntax :
$(selector).hide(speed, callback_fun);
hide() method दो parameter accept करता है, और दोनों parameters Optional होते हैं।
speed : यह milliseconds में time accept करता है , दिए गए time के according ही element hide होता है। अगर time pass नहीं किया गया तो element instant hide हो जायगा।speed value में हम "slow", "fast", or milliseconds time दे सकते हैं।
callback : यह callback function होता है , जो कि element को hide करने के बाद run होता है। JS Callback Functions
$('#btn').click(function(event){
$('#target_elem').hide();
});यह method hide (या जिसे CSS Style के through hide किया गया है। ) किये गए element को show करता है। show() method भी hide() की तरह ही दो parameter accept करता है, और दोनों parameters Optional होते हैं।
$(selector).show(speed, callback_fun);
File : jquery_hide_show.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery hide / show In Hindi </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="hide_para"> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
<button id="hide_btn">Hide Paragrah</button>
<button id="show_btn">Show Paragrah</button>
<script>
window.onload = function(){
if(window.jQuery){
/*hide paragraph on button click*/
$('#hide_btn').click(function(event){
$('#hide_para').hide(1000, function(){
console.log('Paragraph hide');
});
});
/*show paragraph on button click*/
$('#show_btn').click(function(event){
$('#hide_para').show(1000, function(){
console.log('Paragraph show');
});
});
}
};
</script>
</body>
</html>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
toggle method , hide() / show() दोनों methods का काम एक से ही कर देता है। Means अगर target element hide है तो उसे show कर देता है , और अगर show हो रहा है तो उसे hide कर देता है।
$(selector).toggle(speed, callback_fun)
hide() / show() की तरह ही यह भी दो parameters (speed , callback_function) accept करता है , और दोनों ही parameters optional हैं।
File : jquery_toggle.html #file name acoridng to Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery toggle In Hindi </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="toggle_para"> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
<button id="toggle_btn" title="double click here to see result">toggle Paragrah</button>
<script>
window.onload = function(){
if(window.jQuery){
$('#toggle_btn').click(function(event){
$('#toggle_para').toggle();
});
}
};
</script>
</body>
</html>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
I Hope अब आपको jQuery में hide / show / toggle effects के बारे में अच्छे से समझ आ गया होगा।