Menu Close

Show / hide Functions using jQuery

0
(0)

With jQuery, you can use jQuery show/hide effect an HTML elements using the functions show() and hide(). The hide() function be used to hide some HTML element when some event occurs while show() can be used to display the hidden element.

Syntax

$(selector).show(speed,callback); 

The syntax contains the selector to access the 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

HTML

<div class="para">The content to display jQuery show/hide function effect.</pdiv>
<button id="hide">Hide</button>
<button id="show">Show</button> 

Script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>      

<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $(".para").hide();
    });
    $("#show").click(function(){
        $(".para").show();
    });
});
</script> 

Output

Test for Show / hide Functions using jQuery

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Share

Posted in HTML, JavaScript, jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *

You can also read...