title: JQUery Hide DIV clicking outside the DIV
body: <p>Let's assume i have the following control :</p>
  
  <pre><code>   &lt;div class="slControlWrapper"&gt;
          &lt;div class="slControlLabel"&gt;
              &lt;asp:Label ID="lblSL" CssClass="lblSL" runat="server"&gt;Clickable Label&lt;/asp:Label&gt;
          &lt;/div&gt;
          &lt;div class="slControlSeparator"&gt;
              &lt;img alt="" src="../Images/pxlGray.gif" style="width: 1px; height: 29px" /&gt;
          &lt;/div&gt;
          &lt;div class="slControlDropDown"&gt;
              &lt;img alt="Clickable DropDown image" src="../Images/btDropDownCharcoal.gif" style="width: 23px; height: 29px" /&gt;
          &lt;/div&gt;
           &lt;div id="wndSL"&gt;
              This is the hidden content of my DIV Window
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>By default the wndSL has 
  style= " display:none;     background-color: blue;    height:500px;    width:590px;"</p>
  
  <p>I am able to show the wndSL when I click either slControlLabel or slControlDropDown. 
  However I also need to hide it when I click either on the slControlLabel or slControlDropDown or anywhere outside the wndSL outside .</p>
  
  <p>Can anyone help me how to figure out how to hide it, clicking anywhere outside my wndSL.</p>
  
  <p>This is what I have so far... and I need to add the piece to hide it whenever i click outside the window</p>
  
  <p>Thanks</p>
  
  <pre><code> $('.slControlLabel, .slControlDropDown').bind('click',function(event){
         alert('This will open the wndSL'); 
         $('#wndSL').show(); 
   });
  </code></pre>
  
  <p><strong>New Problem</strong> Revision 2</p>
  
  <p>Here is the DIV i have now and as you will see I have more controls in there... so the origiinal answer does not work anymore because, when I click on the control within the DIV, it still closes the DIV.... So although my original request was to close when you click outside the DIV works , when i addded controls within the DIV, my condition to hide does not work... How can I tweak it so that anything within the DIV when clicked will not close the window (except the close button icoRedX.gif on the header )</p>
  
  <p>This is my control</p>
  
  <pre><code>    &lt;div class="wndShoppingList" id="wndShoppingList" style="display: block; "&gt;
  &lt;div id="ctl00_ctl00_phContent_DynamicUserControl_Step_1_pnlWndShoppingListContentPanel" style="display: block; "&gt;&lt;div id="ctl00_phContent_DynamicUserControl_Step_1_pnlWndShoppingListContent"&gt;
  &lt;div class="tableContainer"&gt;
          &lt;div class="header"&gt;
              &lt;div class="slHeaderLeft"&gt;
              Select a Saved Shopping List
              &lt;/div&gt;
              &lt;div class="slHeaderRight"&gt;
              &lt;a id="ctl00_phContent_DynamicUserControl_Step_1_btClose" class="RadButton RadButton_Default rbImageButton" href="javascript:void(0)" style="display:inline-block;height:20px;width:18px;background-image:url(/APPSERVER0001/Images/icoDeleteGrayX.gif);line-height:20px;line-height:20px;height:20px;"&gt;&lt;span class="rbText rbHideElement" style="width:100%;padding-left:0;padding-right:0;"&gt;&lt;/span&gt;&lt;input id="ctl00_phContent_DynamicUserControl_Step_1_btClose_ClientState" name="ctl00_phContent_DynamicUserControl_Step_1_btClose_ClientState" type="hidden" autocomplete="off"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="details"&gt;
              &lt;div class="gridDescription"&gt;
              Select a saved Shopping List to open. The list you already have open will be automatically  saved
              &lt;/div&gt;
              &lt;div class="gridContainer"&gt;
                  &lt;div id="ctl00_ctl00_phContent_DynamicUserControl_Step_1_pnlTemplateShoppingListPanel"&gt;
                      &lt;div id="ctl00_phContent_DynamicUserControl_Step_1_pnlTemplateShoppingList"&gt;
                          &lt;div id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList" class="RadGrid RadGrid_Default" style="height:300px;" tabindex="0"&gt;
                                  &lt;table cellspacing="0" class="rgMasterTable" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00" style="width:100%;table-layout:auto;empty-cells:show;"&gt;
                                  &lt;colgroup&gt;
                                  &lt;col&gt;
                                  &lt;col&gt;
                                  &lt;col&gt;
                                  &lt;col&gt;
                                  &lt;/colgroup&gt;
                                  &lt;thead&gt;
                                  &lt;tr style="display:none;"&gt;
                                  &lt;th scope="col"&gt;&amp;nbsp;&lt;/th&gt;&lt;th scope="col"&gt;&amp;nbsp;&lt;/th&gt;&lt;th scope="col"&gt;&amp;nbsp;&lt;/th&gt;&lt;th scope="col"&gt;&amp;nbsp;&lt;/th&gt;
                                  &lt;/tr&gt;
                                  &lt;/thead&gt;&lt;tbody&gt;
                                  &lt;tr class="rgRow" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00__0"&gt;
                                  &lt;td&gt;&lt;input type="image" name="ctl00$phContent$DynamicUserControl_Step_1$grdTemplateShoppingList$ctl00$ctl04$gbcSelectColumn" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl04_gbcSelectColumn" src="../Images/btSelectCharcoal.gif" style="border-width:0px;"&gt;&lt;/td&gt;&lt;td&gt;
                                  &lt;span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl04_lblTemplateName"&gt;Master Shopping List&lt;/span&gt;&lt;br&gt;
                                  &lt;span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl04_lblLastUpdated"&gt; Updated August 10, 2011&lt;/span&gt;
                                  &lt;/td&gt;&lt;td&gt;16 items&lt;/td&gt;&lt;td&gt;&lt;input type="image" name="ctl00$phContent$DynamicUserControl_Step_1$grdTemplateShoppingList$ctl00$ctl04$gbcDeleteColumn" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl04_gbcDeleteColumn" src="../Images/icoDeleteRedX.gif" onclick="if(!confirm('Are you sure you want to delete this list ?'))return false;" style="border-width:0px;"&gt;&lt;/td&gt;
                                  &lt;/tr&gt;&lt;tr class="rgAltRow" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00__1"&gt;
                                  &lt;td&gt;&lt;input type="image" name="ctl00$phContent$DynamicUserControl_Step_1$grdTemplateShoppingList$ctl00$ctl06$gbcSelectColumn" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl06_gbcSelectColumn" src="../Images/btSelectCharcoal.gif" style="border-width:0px;"&gt;&lt;/td&gt;&lt;td&gt;
                                  &lt;span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl06_lblTemplateName"&gt;Audrey's Birthday Party&lt;/span&gt;&lt;br&gt;
                                  &lt;span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl06_lblLastUpdated"&gt;Shopped August 2, 2011 for $49.11&lt;/span&gt;
                                  &lt;/td&gt;&lt;td&gt;11 items&lt;/td&gt;&lt;td&gt;&lt;input type="image" name="ctl00$phContent$DynamicUserControl_Step_1$grdTemplateShoppingList$ctl00$ctl06$gbcDeleteColumn" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl06_gbcDeleteColumn" src="../Images/icoDeleteRedX.gif" onclick="if(!confirm('Are you sure you want to delete this list ?'))return false;" style="border-width:0px;"&gt;&lt;/td&gt;
                                  &lt;/tr&gt;&lt;tr class="rgRow" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00__2"&gt;
                                  &lt;td&gt;&lt;input type="image" name="ctl00$phContent$DynamicUserControl_Step_1$grdTemplateShoppingList$ctl00$ctl08$gbcSelectColumn" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl08_gbcSelectColumn" src="../Images/btSelectCharcoal.gif" style="border-width:0px;"&gt;&lt;/td&gt;&lt;td&gt;
                                  &lt;span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl08_lblTemplateName"&gt;Monthly Household Supplies&lt;/span&gt;&lt;br&gt;
                                  &lt;span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl08_lblLastUpdated"&gt;Updated February 22, 2011&lt;/span&gt;
                                  &lt;/td&gt;&lt;td&gt;8 items&lt;/td&gt;&lt;td&gt;&lt;input type="image" name="ctl00$phContent$DynamicUserControl_Step_1$grdTemplateShoppingList$ctl00$ctl08$gbcDeleteColumn" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl08_gbcDeleteColumn" src="../Images/icoDeleteRedX.gif" onclick="if(!confirm('Are you sure you want to delete this list ?'))return false;" style="border-width:0px;"&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;/tbody&gt;        
                                  &lt;/table&gt;
                                  &lt;input id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ClientState" name="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ClientState" type="hidden" autocomplete="off"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the JS</p>
  
  <pre><code>function OnPageLoad(){
  window.$ = $telerik.$;
  var t;
  $(document).ready(function () {
  $('.slControlLabel, .slControlDropDown').bind('click',function(event){
      $('#wndShoppingList').show();  
      event.stopPropagation(); 
  });
  
  // OnClick Event outside the wndShoppinglist.
  // $('html').click(function(event){  Tried  this as well 
  if((event.target.id != 'wndShoppingList')){  // This used to work but after adding controls in the DIV, this returns the ID of the controls within the DIV
       alert('click on body '+ event.target.id)
       alert('about to hide')
       $('#wndShoppingList').hide(); 
  });
  
  });   //End $(document).ready()
  }
  Sys.Application.add_load(OnPageLoad);  
  </code></pre>