All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Hide DIV In jQuery

Last Updated : Mar 11, 2024

How To Hide DIV In jQuery

In this article we will show you the solution of how to hide div in jQuery, as we know in jquery for hide elements we have more choice like using display property at css(), attr(), prop() or hide().

Here we are going to use hide() method for hides the selected div element. The hide() method hides the selected elements.

So with the help of this method we can easily hide any element in html document.

Step By Step Guide On How To Hide DIV In jQuery :-

In html we defined div element with h1, p elements and button ‘Hide’ helps us for proceeds process.

In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser.

There we appended click() method on button ‘hide’ and within this we specified div element then which is appends with hide() method for hides the selected element with children.

<!DOCTYPE html>
<html>
    <head>
        <title>Hide div in jquery</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $(".hide").click(function(){
                    $("div").hide();
                })
            });
        </script>
    <body>
        <div>
            <h1>Welcome All</h1>
            <p>This is paragraph tag</p>
        </div>
        <button class="hide">Hide</button>
    </body>
    </head>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Here we imported open source jquery library support file which is needed for coding using jquery in program.
  5. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  6. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  7. We defined div element with h1 contain text ‘Welcome All’, p tag contain text ‘This is paragraph tag’ and button ‘Hide’ defined with class attribute for proceeds process when user clicks on it.
  8. In script we defined ready() method within that we appended click() method on button ‘Hide’ by class attribute ‘hide’. There we specified div element by tag name then which is appends with hide() method for hides the div with also children.
  9. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to hide div in jquery. Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.

When we executes program on browser we can see h1, p texts ‘Welcome All, This is paragraph tag’ and button ‘Hide’ now user needs to clicks on it then we can see div block fully hidden.

I hope this tutorial on how to hide div in jQuery helps you and the steps and method mentioned above are easy to follow and implement.