hide toggle div when clicking control in toggle div
<p>I use a toggle div in page. I have a textbox and a dropdownlist in it.</p>

<pre><code> &lt;div class="Search" style="display: none" &gt;
  &lt;table width="100%" style="border: 1px solid #fff; border-radius:5px;padding:15px"&gt;
   &lt;tr&gt;
    &lt;td width="60px"&gt;دسته بندی&lt;/td&gt;
    &lt;td&gt;
     &lt;asp:DropDownList ID="CategoryDropDownList" runat="server" /&gt;
    &lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;کلمه کلیدی&lt;/td&gt;
    &lt;td&gt;
     &lt;asp:TextBox ID="SearchTextBox" runat="server" Width="95%" /&gt;
    &lt;/td&gt;
    &lt;td&gt;&lt;asp:ImageButton runat="server" ID="SerachButton"  ImageUrl="~/images/btnSearchIcon.png" OnClick="SerachButton_Click"  ValidationGroup="Search" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
 &lt;/div&gt;
</code></pre>

<p>I hide it when clicking anywhere on the page.</p>

<pre><code>&lt;script type="text/javascript"&gt;
     $(document).ready(function () {
         $('#showSreachDiv').click(function (evt) {
             $(".Search").toggle("slow");
             evt.stopPropagation();
         });

         $(document).click(function () {
             var $el = $(".Search");

             // toggle div
             if ($el.is(":visible")) {
                 // fade out
                 $(".Search").toggle("slow");
             }
         });
     });

&lt;/script&gt;
</code></pre>

<p>But when i clicking control in toggle div, hide it.</p>

<p>I want insert text in textbox but don't it. </p>
