Table of Contents
In this post, we will see jquery hide ,show and toggle example.
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():
jQuery hide()
It is used to hide matched element. With jQuery, you can hide elements with hide method
Example :
|
1 2 3 4 5 |
$("#hide").click(function(){ Â $("p").hide(); }); |
Syntax :
|
1 2 3 |
$(selector).hide(speed,callback); |
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():
|
1 2 3 4 5 |
$("button").click(function(){ Â $("p").hide(1000); }); |
Create html file as jQueryHide.html
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():
Syntax:
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:
Live Demo:
JQuery Toggle to Show/Hide Content on jsbin.com
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<title>JQuery Toggle to Show/Hide Content</title> <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script> <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> <button id="button">Click to Hide Content</button> <div class="mydiv"> <p>Hello world from java2blog!!!!</p> <p>Welcome to JQuery.</p> </div> |
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 :
|
1 2 3 4 5 |
$("#hide").click(function(){ Â $("p").show(); }); |
Syntax :
|
1 2 3 |
$(selector).show(speed,callback); |
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():
|
1 2 3 4 5 |
$("button").click(function(){ Â $("p").show(1000); }); |
Create html file as jQueryShow.html
Live demo:JQuery Show Content on jsbin.com
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<title>JQuery Toggle to Show/Hide Content</title> <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script> <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> <button id="button">Click to Show Content</button> <div class="mydiv"> <p>Hello world from java2blog!!!!</p> <p>Welcome to JQuery.</p> </div> |
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 :
|
1 2 3 4 5 |
$("button").click(function(){ Â $("p").toggle(); }); |
|
1 2 3 |
$(selector).toggle(speed,callback); |
The optional callback parameter is a function to be executed after toggle() completes. Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<title>JQuery Toggle to Show/Hide Content</title> <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script> <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> <button id="mybutton">Click to Show/Hide Content</button> <div class="mydiv"> <p>Hello world from java2blog!!!!</p> <p>Welcome to JQuery.</p> </div> |
JQuery Toggle to Show/Hide Content on jsbin.com
Was this post helpful?
Let us know if this post was helpful. Feedbacks are monitored on daily basis. Please do provide feedback as that\'s the only way to improve.
