tech help
▷Onclick Show Hide Div Jquery Demo-with 3 method हिंदी।
हाय दोस्तों हम आपका अभिनंदन करते है। जैसा की हमें मालूम है। की आप ये जानकारी प्राप्त करना चाहते है। कैसे div, show एंड hide होता है। इसलिए आज हम आपके लिए onclick show hide div jquery demo क्लास लाये है। आपको सभी प्रकार की जानकारी मिल जाएगी। इस जानकारी को प्राप्त करने के बाद आप आसानी से किसी भी div या अन्य किसी भी एलिमेंट show एंड hide कर पाएंगे।
Javascript add method
- html file के head tag के अंदर यह कोड रखना अनिवार्य <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
- <script></script> tag को लिखना।
- <script></script> tag के भीतर (अंदर ) $(document).ready(function () {}); को लिखना।
- $(document).ready(function () {}); के भीतर (अंदर ) अन्य javascript को लिखना।
Show Hide Div Introdux Info
सबसे पहले हम आपको जानकारी प्रदान करना चाहते है। किसी भी div को शो एंड हाईड करने के लिए। javascript का उपयोग किया जाता है। आज आपको div को हाईड और शो करने के अलावा अन्य जानकारी भी मिल जाएगी। जो इसी method के साथ जुडी हुई है। यानिकि आप इस method से अन्य इफेक्ट भी use कर पाएंगे। हम आपको डेमो को आसानी से समझने का प्रयाश करेंगे। ताकि आपको समझने में किसी प्रकार की परेशानी न रहे। चलिए जानते है।
Onclick Show Hide Div Jquery Demo
सबसे पहले हम आपको जानकारी प्रदान करना चाहते है। आप किसी भी डिव, इमेज या पेराग्राफ को hide या show करना चाहते है। उसे हम दो प्रकार से hide and show कर सकते है। यानिकि हम इसके लिए चाहे तो show and hide के लिए अलग अलग button का उपयोग कर सकते है। अगर हम केवल एक ही button का उपयोग करना चाहे तो हम केवल एक ही button से भी div को hide and show करवा सकते है। हम दोनों ही प्रकार से किसी एलिमेंट को hide and show करना बताएंगे। सबसे पहले हम ये जानते है। की हम अलग अलग बटन का उपयोग कैसे करते है। तो चलिए जानते है। इसके लिए हम एक code लिखते है।
try code
<!DOCTYPE html><html><head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function () { $("#hide").click(function () { $("p").hide(); }); $("#show").click(function () { $("p").show(); }); }); </script></head><body> <p>First of all, we want to provide you information. You want to hide or show any div, image, or paragraph. We can hide and show it in two ways. If we want to, we can use different buttons to show and hide. If we want to use only one button, then we can make the div hide and show with only one button. We will tell you to hide and show an element in both ways. First of all, we know this. That how we use different buttons. So let's know. For this, we write code.</p> <button id="hide">Hide</button> <button id="show">Show</button></body></html> |
आप इस इमेज में देख सकते है। हमने यह code लिखा है। इसका आउटपुट हमें screen में कुछ इस प्रकार दो buttton से साथ दिख रहा है। इसमें हमने एक paregraf को hide and show करने का निर्देश दिए है।
हम आपको जानकारी प्रदान करना चाहते है। जब भी हमें कोई भी javascript अपने webpage में उपयोग करना होता है। तो हमें इस code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> को हमारी html file के head tag में रखना अनिवार्य होता है। यदि हम इसका उपयोग नहीं करते है। तो हम javascript को रन नहीं करवा सकते है।
चलिए हम इस code को समझते है। जैसा की आप देख सकते है। हमने code में </body> tag के ऊपर javascript लिखा है। इसमें हमने सबसे पहले $(document).ready(function () {
}); लिखा है। यह एक स्टैंडर रूल होता है। जावा स्क्रिप्ट को लिखने के लिए। इसमें निर्देश दिया गया है। जब हमारे वेबपेज का अन्य html code ब्रौज़र में load हो जाये तब यह javascript load होना चाहिए। इसके बाद हमारा जितना भी java code होता है। वह code हमें $(document).ready(function () {
}); भीतर लिखना होता है।
इसमें आप देख सकते है। हमने $(“#hide”).click(function () { $(“p”).hide(); }); लिखा है। इसमें हमने $(“#hide”).click(function () लिखा है। इसमें हमने यह निर्देश दिया है। जब (“#hide”) में क्लीक होगा तब (“p”) हाईड हो जाये। इसमें #hide हमरा button है। जब इस button को क्लीक किया जायेगा तब “p” यानिकि पेराग्राफ जिसका p tag से मिलान होता है। उसे हाईड कर दिया जायेगा। हमने इसमें p टैग का उपयोग किया है। आप कोई भी एलिमेंट दे सकते है। जैसे div, class, id, span tag आदि। इसी प्रकार $(“#show”).click(function () {
$(“p”).show(); वाला बटन भी काम करता है। आप इस कोड का उपयोग करके देख सकते है।
Hide Div After Some Time Using Javascript
अगर हम किसी भी एलिमेंट को hide या show करना चाहते है। लेकिन हम चाहते है। की हमारे द्वारा hide या show किया जाने वाला एलिमेंट थोड़े समय से प्रक्रिया करे। तो हम यह भी कर सकते है। तो चलिए जानते है।
try code
<!DOCTYPE html><html><head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function () { $("button").click(function () { $("div").hide(2000); }); }); </script></head><body> <button>Hide</button> <div> First of all, we want to provide you information. You want to hide or show any div, image, or paragraph. We can hide and show it in two ways. If we want to, we can use different buttons to show and hide. If we want to use only one button, then we can make the div hide and show with only one button. We will tell you to hide and show an element in both ways. First of all, we know this. That how we use different buttons. So let's know. For this, we write code </div></body></html> |
जैसा की आप इस कोड को देख सकते है। हमने यह $(“div”).hide(2000); एक लाइन लिखी है। इसमें आप देख सकते है। हमने (2000) लिखा है। यह 2000 की संख्या मिली सेकंड की संख्या है। इसका अर्थ यह होता है। की जब भी कोई यूजर hide button में क्लीक करेगा। तो जो भी div या paragraph हाईड होगा वह एलिमेंट अचानक से hide नहीं होगा। बल्कि हमारे द्वारा लिखी गयी। मिलीसेकंड के अनुसार धीरे धीरे hide होगा। इस प्रकार किसी भी hide या show किये जाने वाले एलिमेंट में हम समय को निर्धारित कर सकते है।
Show Hide Div With One Button (Toggle)
हमने शुरुआत में आपको बताया था। हम किसी div, paragraph अथवा अन्य किसी भी एलिमेंट में show and hide करने के लिए केवल एक ही button का उपयोग भी कर सकते है। उसी button को क्लीक करने से एलिमेंट hide होगा। और उसी button को क्लीक करने से एलिमेंट दोबारा से show हो जाता है। चलिए जानते है।
try code
<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("div").toggle();});});</script></head><body><button>show and hide button</button> <div> one button, then we can make the div hide and show with only one button. We will tell you to hide and show an element in both ways. First of all, we know this. That how we use different buttons. So let's know. For this, we write code </div></body></html> |
आप यह code पढ़ सकते है। यह code भी अन्य के जैसा ही लिखा गया है। इसमें आप देख सकते है। हमने .hide(); के स्थान पर .toggle(); लिखा है। यह लिखने से अब हमारा एलिमेंट केवल एक ही बटन से हाईड और शो होने लगेगा। हम इसमें भी समय को शामिल करने के लिए मिलीसेकंड का उपयोग कर सकते है। उपयोग करने का मेथड same रहेगा।
read more
▷how to insert video in html5 using notepad
Information Source: w3school
