JQUery Hide DIV clicking outside the DIV

Question

Let's assume i have the following control :

   <div class="slControlWrapper">
        <div class="slControlLabel">
            <asp:Label ID="lblSL" CssClass="lblSL" runat="server">Clickable Label</asp:Label>
        </div>
        <div class="slControlSeparator">
            <img alt="" src="../Images/pxlGray.gif" style="width: 1px; height: 29px" />
        </div>
        <div class="slControlDropDown">
            <img alt="Clickable DropDown image" src="../Images/btDropDownCharcoal.gif" style="width: 23px; height: 29px" />
        </div>
         <div id="wndSL">
            This is the hidden content of my DIV Window
        </div>
    </div>

By default the wndSL has style= " display:none; background-color: blue; height:500px; width:590px;"

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 .

Can anyone help me how to figure out how to hide it, clicking anywhere outside my wndSL.

This is what I have so far... and I need to add the piece to hide it whenever i click outside the window

Thanks

 $('.slControlLabel, .slControlDropDown').bind('click',function(event){
       alert('This will open the wndSL'); 
       $('#wndSL').show(); 
 });

New Problem Revision 2

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 )

This is my control

    <div class="wndShoppingList" id="wndShoppingList" style="display: block; ">
<div id="ctl00_ctl00_phContent_DynamicUserControl_Step_1_pnlWndShoppingListContentPanel" style="display: block; "><div id="ctl00_phContent_DynamicUserControl_Step_1_pnlWndShoppingListContent">
<div class="tableContainer">
        <div class="header">
            <div class="slHeaderLeft">
            Select a Saved Shopping List
            </div>
            <div class="slHeaderRight">
            <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;"><span class="rbText rbHideElement" style="width:100%;padding-left:0;padding-right:0;"></span><input id="ctl00_phContent_DynamicUserControl_Step_1_btClose_ClientState" name="ctl00_phContent_DynamicUserControl_Step_1_btClose_ClientState" type="hidden" autocomplete="off"></a>
            </div>
        </div>
        <div class="details">
            <div class="gridDescription">
            Select a saved Shopping List to open. The list you already have open will be automatically  saved
            </div>
            <div class="gridContainer">
                <div id="ctl00_ctl00_phContent_DynamicUserControl_Step_1_pnlTemplateShoppingListPanel">
                    <div id="ctl00_phContent_DynamicUserControl_Step_1_pnlTemplateShoppingList">
                        <div id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList" class="RadGrid RadGrid_Default" style="height:300px;" tabindex="0">
                                <table cellspacing="0" class="rgMasterTable" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00" style="width:100%;table-layout:auto;empty-cells:show;">
                                <colgroup>
                                <col>
                                <col>
                                <col>
                                <col>
                                </colgroup>
                                <thead>
                                <tr style="display:none;">
                                <th scope="col">&nbsp;</th><th scope="col">&nbsp;</th><th scope="col">&nbsp;</th><th scope="col">&nbsp;</th>
                                </tr>
                                </thead><tbody>
                                <tr class="rgRow" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00__0">
                                <td><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;"></td><td>
                                <span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl04_lblTemplateName">Master Shopping List</span><br>
                                <span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl04_lblLastUpdated"> Updated August 10, 2011</span>
                                </td><td>16 items</td><td><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;"></td>
                                </tr><tr class="rgAltRow" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00__1">
                                <td><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;"></td><td>
                                <span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl06_lblTemplateName">Audrey's Birthday Party</span><br>
                                <span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl06_lblLastUpdated">Shopped August 2, 2011 for $49.11</span>
                                </td><td>11 items</td><td><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;"></td>
                                </tr><tr class="rgRow" id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00__2">
                                <td><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;"></td><td>
                                <span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl08_lblTemplateName">Monthly Household Supplies</span><br>
                                <span id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ctl00_ctl08_lblLastUpdated">Updated February 22, 2011</span>
                                </td><td>8 items</td><td><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;"></td>
                                </tr>
                                </tbody>        
                                </table>
                                <input id="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ClientState" name="ctl00_phContent_DynamicUserControl_Step_1_grdTemplateShoppingList_ClientState" type="hidden" autocomplete="off">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

This is the JS

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);  

Answer 1

$("body").click
(
  function(e)
  {
    if(e.target.id != "wndSL")
    {
      $("#wndSL").hide();
    }
  }
);

Answer 2

You need to use

event.stopPropagation();

Html

<div class="slControlWrapper">
        <div class="slControlLabel">
            <asp:Label ID="lblSL" CssClass="lblSL" runat="server">Clickable Label</asp:Label>
        </div>
        <div class="slControlSeparator">
            <img alt="" src="../Images/pxlGray.gif" style="width: 1px; height: 29px" />
        </div>
        <div class="slControlDropDown">
            <img alt="Clickable DropDown image" src="../Images/btDropDownCharcoal.gif" style="width: 23px; height: 29px" />
        </div>
         <div id="wndSL">
            This is the hidden content of my DIV Window
        </div>
        <div id="test">
        I am for test click on me
        </div>
    </div>

CSS

#wndSL {

display:none;     background-color: blue;    height:500px;    width:590px;
}

Jquery

$('.slControlLabel, .slControlDropDown').bind('click',function(event){
       alert('This will open the wndSL');
       $('#wndSL').show();
     event.stopPropagation();
 });

$('html').click(function() {
   $('#wndSL').hide();
});

And here is Demo

Answer 3

Bind a click event to html to capture any click made, and make it hide the #wndSL

$("html").click(function() {
    $("#wndSL").hide();
});

Then override that on your #wndSL's click event using .stopPropagation();

$("#wndSL").click(function (event) {
  event.stopPropagation();
});