• hide() - You can hide HTML elements
  • show() - You can show HTML elements

Syntax:

//speed is "slow", "fast", or milliseconds.
$(selector).hide(speed,callback); //callback is optional 
$(selector).show(speed,callback);


Example:

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery hide() and show() Methods</title>
    </head>
    <body>
        <p>I am here to hide and show</p>
        <button id="hide">Hide</button>
        <button id="show">Show</button>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("#hide").click(function() {
                    $("p").hide();
                });
                $("#show").click(function() {
                    $("p").show();
                });
            });
        </script>
    </body>
</html>

Output:


Are you facing problems in understanding this article?

Download Source