Question

I Hide/Show elements with .toggle()

 <div style="position: absolute; top: 0; right: 250px;z-index:7">
   <div  class="Search" style="display: none;" >
    <table width="100%" style="border: 1px solid #fff; border-radius:5px;padding:15px">
      <tr>
      <td>
      <asp:DropDownList ID="CategoryDropDownList" runat="server" />
      </td>
      </tr>
      </table>
   </div>
   <div id="showSreachDiv">
   <a style="cursor: pointer">
    <img src="images/btnSearch.png" /></a>
   </div>
 </div> 

with jquery

 $(document).ready(function () {
         $("#showSreachDiv").click(function () { $(".Search").toggle("slow"); });
     });

When i click my div, show toggle div.

But i want, hide toggle div when clicking anywhere on the page.

I use this code

 $(function () {

         // body click
         $("body").click(function () {

             // element to toggle
             var $el = $(".Search");

             // toggle div
             if ($el.is(":visible")) {
                 // fade out
                 $el.fadeOut(200);
             } else {
                 // fade in
                 $el.fadeIn(200);
             }

         });
     });

But it show and hide toogle div when i click my div.

Answer 1

You have to stop the event bubbling to the document e.stopPropagation():

chekout fiddle

$(document).ready(function () {
  $("#showSreachDiv").click(function (e) { //<--------pass here
      e.stopPropagation(); // <--------------stop here
      $(".Search").toggle("slow");
  });
  $(document).click(function () { // you don't need the else part to fadeout
      var $el = $(".Search");
      if ($el.is(":visible")) {
          $el.fadeOut(200);
      }
   });
});