Loading...

TapGen

Free online tutorials

img

jQuery show hide method is used to make HTML elements appear and disappear. jQuery methods allow us to quickly apply commonly used effects.

To hide a div element using jQuery, you can use the .hide() method. If want to hide any selected div after clicking a button you can use the following code:

hide a specific div using jQuery.

Here's a basic example:

                                        
                                            
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide Div Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#hideButton").click(function() {
                $("#myDiv").hide();
            });
        });
    </script>
</head>
<body>
    <div id="myDiv">This is the div to be hidden.</div>
    <button id="hideButton">Hide Div</button>
</body>
</html>
                                    

When you click on hide div, the div with the id myDiv will be hidden.

It is very easy to set effects in application using jQuery.

You can also use .hide() directly in your script to hide a div immediately.

how to hide a div With Animation effect

You can also use .hide() with a duration for animation:

Hides the element with a fade-out effect over 500 milliseconds



 $("#myDiv").hide(500); // 

 

=================================
Share This Article
icon

New to Communities?

Join the community