Show / hide Functions using jQuery

Jennifer December 21, 2020 jQuery 0 Comments

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>