Jquery hide show and toggle example

In this post, we will see jquery hide ,show and toggle example.

jQuery hide()

It is used to hide matched element. With jQuery, you can hide elements with hide method
Example :
$("#hide").click(function(){
  $("p").hide();
});
Syntax :
$(selector).hide(speed,callback);
The optional speed parameter is used to specify the speed of the hiding, and can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function that will be executed after the hide() method completes. The following example demonstrates the speed parameter with hide():
$("button").click(function(){
  $("p").hide(1000);
});
Create html file as jQueryHide.html
 
<!doctype>
<html>
<head>
  <title>JQuery Toggle to Show/Hide Content</title>
  <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<h2>Jquery Toggle Example to Display and Hide Content</h2>
<style>
   div{
        border:3px dotted red;
        color:red;
        font-family: arial narrow;
   }
</style>
<script type="text/javascript">
   $(document).ready(function(){
      $("#button").click(function(){
         $(".mydiv").hide();
      });
   });
</script>
<body>
  <button id="button">Click to Hide Content</button>
  <div class="mydiv">
 <p>Hello world from java2blog!!!!</p>
 <p>Welcome to JQuery.</p>
  </div>
</body>
</html>
Live demo: JQuery Hide Content on jsbin.com

jQuery show()

It is used to show matched element. With jQuery, you can show elements with show method Example :
$("#hide").click(function(){
  $("p").show();
});
Syntax :
 
$(selector).show(speed,callback);
The optional speed parameter is used to specify the speed of the showing, and can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function that will be executed after the show() method completes.
The following example demonstrates the speed parameter with show():
$("button").click(function(){
  $("p").show(1000);
});
Create html file as jQueryShow.html
<!doctype>
<html>
<head>
  <title>JQuery Toggle to Show/Hide Content</title>
  <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<h2>Jquery Toggle Example to Display and Hide Content</h2>
<style>
   div{
        border:3px dotted red;
        color:red;
        font-family: arial narrow;
  display :  none;
   }
</style>
<script type="text/javascript">
   $(document).ready(function(){
      $("#button").click(function(){
         $(".mydiv").show();
      });
   });
</script>
<body>
  <button id="button">Click to Show Content</button>
  <div class="mydiv">
 <p>Hello world from java2blog!!!!</p>
 <p>Welcome to JQuery.</p>
  </div>
</body>
</html>
Live demo: JQuery Show Content on jsbin.com

jQuery toggle()

With jQuery, you can toggle between the hide() and show() methods with the toggle() method. Shown elements are hidden and hidden elements are shown:
Example :
 
$("button").click(function(){
  $("p").toggle();
});
Syntax:
$(selector).toggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after toggle() completes. Example:
<!doctype>
<html>
<head>
  <title>JQuery Toggle to Show/Hide Content</title>
  <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<h2>Jquery Toggle Example to Display and Hide Content</h2>
<style>
   div{
        border:3px dotted red;
        color:red;
        font-family: arial narrow;
        display:none;
   }
</style>
<script type="text/javascript">
   $(document).ready(function(){
      $("#mybutton").click(function(){
         $(".mydiv").toggle();
      });
   });
</script>
<body>
  <button id="mybutton">Click to Show/Hide Content</button>
  <div class="mydiv">
 <p>Hello world from java2blog!!!!</p>
 <p>Welcome to JQuery.</p>
  </div>
</body>
</html>
Live Demo:
JQuery Toggle to Show/Hide Content on jsbin.com

Written by Arpit:

If you have read the post and liked it. Please connect with me on Facebook | Twitter | Google Plus

 

Java tutorial for beginners Copyright © 2012