How To Hide Div On Click Using JQuery

How To Hide Div On Click Using JQuery

Well, you may want to dismiss the content inside the div element on page. It’s very simple to achieve using JQuery scripts. Let’s see, how to hide Div element on click event.

JQuery hide div

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js 
type="text/javascript"></script> <script type="text/javascript" language="javascript"> $("document").ready(function(){ $(".myDivClass").click(function(){ $(this).hide("slow"); }); }); </script>

Description
I have div whose class name is “myDivClass”. On ready state of document I’m attaching click event to the div. we will search those div by class name.


JQuery hide div on Click example

The complete example can be copied to notepad from below HTML code. Save notepad as xxx.html and open it in browser to see how JQuery hide div functionality works.

<html>
<head>
    <title>Jquery Change content of Div</title>
    <style>
   
     .myDivClass
    {
     display:block;
    }  
   
  </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript"> 
   
       $("document").ready(function(){
       
       
             $(".myDivClass").click(function(){
    
                $(this).hide("slow");     
    
              });
      
        });
   
    </script>

</head>
<body>
    <div>        
        <div class="myDivClass" id="div1">
            You can on this div to dismiss </br> Ok, you can attach similar event on dismiss image.
        </div>       
        <div class="myDivClass" id="div2">
            You can on this div to dismiss </br> Ok, you can attach similar event on dismiss image.
        </div>       
        <div class="myDivClass" id="div3">
            You can on this div to dismiss </br> Ok, you can attach similar event on dismiss image.
        </div>       
        <div class="myDivClass" id="div4">
            You can on this div to dismiss </br> Ok, you can attach similar event on dismiss image.
        </div>       
        <div class="myDivClass" id="div5">
            You can on this div to dismiss </br> Ok, you can attach similar event on dismiss image.
        </div>       
        <div class="myDivClass" id="div6">
            You can on this div to dismiss </br> Ok, you can attach similar event on dismiss image.
        </div>       
        <div class="myDivClass" id="div7">
            You can on this div to dismiss </br> Ok, you can attach similar event on dismiss image.
        </div>       
        <div class="myDivClass" id="div8">
            You can on this div to dismiss </br> Ok, you can attach similar event on dismiss image.
        </div>       
        <div class="myDivClass" id="div9">
            You can on this div to dismiss </br> Ok, you can attach similar event on dismiss image.
        </div>               
    </div>
</body>
</html>

Above example uses Google hosted JQuery script. You may wish to download and store it on our server.

Tags:

Jquery

Div scroll scrollbar div div with scrollbar scrollbar in divJQuery Get .next() ElementJQuery Change Div background Color and Text Color On ClickJQuery Hide HTML ElementJQuery Collapsible DivJQuery Animate Div Height and WidthJquery hide show div exampleJQuery add/remove Class DynamicallyJQuery On Click Change Div ContentPrint DivFixed div and floating div

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.