jQuery hide / show In Hindi

📔 : JQuery 🔗

किसी भी Element को hide या show करने के लिए jQuery हमें hide() and show() methods provide कराती है , जिनकी help से आसानी से element को hide / show कर सकते हैं।

jQuery hide

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

jQuery hide() Simple Example
$('#btn').click(function(event){
$('#target_elem').hide();
});

jQuery show

यह method hide (या जिसे CSS Style के through hide किया गया है। ) किये गए element को show करता है। show() method भी hide() की तरह ही दो parameter accept करता है, और दोनों parameters Optional होते हैं।

jQuery show() Syntax
$(selector).show(speed, callback_fun);

jQuery hide / show Example

File : jquery_hide_show.php

CopyFullscreenClose FullscreenRun
<!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>
Output

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.


jQuery toggle

toggle method , hide() / show() दोनों methods का काम एक से ही कर देता है। Means अगर target element hide है तो उसे show कर देता है , और अगर show हो रहा है तो उसे hide कर देता है।

jQuery toggle() Syntax
$(selector).toggle(speed, callback_fun)

hide() / show() की तरह ही यह भी दो parameters (speed , callback_function) accept करता है , और दोनों ही parameters optional हैं।

jQuery toggle Example

File : jquery_toggle.html #file name acoridng to Example

CopyFullscreenClose FullscreenRun
<!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>
Output

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 के बारे में अच्छे से समझ आ गया होगा।

Related Topics :

Rahul Kumar

Rahul Kumar

Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)

Get connected with me. :) LinkedIn Twitter Instagram Facebook

b2eprogrammers