jQuery show/hide Effects
With jQuery, you can use jQuery show/hide effect an HTML elements using the functions show() and hide(). The hide() can be used to hide some HTML element when some event occurs while show() can be used to display the hidden element.
Syntax
|
1 |
$(selector).show(speed,callback) |
The syntax contains the selector to access HTML element and a show function that contains two optional parameters. The first parameter can be used to provide the speed of the effect in milliseconds.
The show() reverse the effect of hide() and display the element hidden by hide(). The hide() applies the display:none CSS to the HTML element when use the jquery function while show() applies the display:block CSS.
Check the example given below to find out the changes effects.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function(){ $("#btnhide").click(function(){ $("p.parahide").hide(); }); $("#btnshow").click(function(){ $("p.parashow").show(); }); }); </script> <p class="parahide parashow">The content to display jQuery show/hide function effect.</p> <button id="btnhide">Hide</button> <button id="btnshow">Show</button> |
Output
The content to display jQuery show/hide function effect.
Click the hide button given above to see the hide effect of jQuery. Now, if you want to show the hidden element, you can click the show button given above which reverses the effect of hide function.
Use the jQuery selectors to select, access the HTML element and apply the required operation.
jQuery toggle() for both jQuery show/hide effects
If you want to perform both the hide and show effects using the jQuery and don’t want to use the hide and show function. A single toggle() is an alternative you can use to perform both jQuery show/hide effect of jQuery. With only that single jQuery function you can perform both the operations.
The function is easy to use and operation is same as the jQuery show/hide function.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btntoggle").click(function(){ $("p.paratoggle").toggle(); }); }); </script> <p class="paratoggle">Click the below button to toggle this content.</p> <button type="button" id="btntoggle">Toggle show/hide</button> |
Output
Click the below button to toggle this content.
Click the toggle button given above to see the effect of the jQuery toggle(). You can notice the effect of both hide and show function with just a single toggle().
Developers use both hide() and show() while developing an application. However, if you want to show the hidden HTML element, you need to only use the show() which applies the display: block CSS to the HTML element.
The toggle() can be used only when you want to first hide the element and then show the element and vice versa.
DOWNLOAD Free jQuery CHEAT SHEET
You must also read.