title: Jquery in Multi Select Drop down list
body: <p>I have put myself together a multiple select drop down list user control that looks like this:</p>
  
  <pre><code>&lt;asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"&gt;
      &lt;ContentTemplate&gt;
          &lt;div id="multiTop" class="multiTop"&gt;
              &lt;asp:Button ID="DropDownButton" CssClass="dropDownButton" Text="All" runat="server" /&gt;
          &lt;/div&gt;
          &lt;div ID="multiMain" class="multiMain" style="display:none"&gt;              
              &lt;asp:Button ID="SelectAllButton" Text="All" runat="server" CssClass="allButton" OnClick="AllButton_Click" /&gt;
              &lt;asp:CheckBoxList ID="MultiCheckBox" runat="server" RepeatDirection="Vertical" AutoPostBack="true"
              OnSelectedIndexChanged="MultiCheckBox_SelectedIndexChanged" CssClass="mutiCbl"&gt;
              &lt;/asp:CheckBoxList&gt;
          &lt;/div&gt;
      &lt;/ContentTemplate&gt;
  &lt;/asp:UpdatePanel&gt;
  </code></pre>
  
  <p>To begin with I was using a server side event to show and hide the "multiMain" panel (now a div) whenever the DropDownButton was pressed. A bit of Css fiddling later and the whole thing looked like a drop down list.</p>
  
  <p>The main problem however is if the user clicks anywhere else on the page, unlike a real dropdownlist, the drop down part didn't dissapear. Thus with a heavy heart I've turned to Jquery, something I have little to no idea about.</p>
  
  <p>I'm looking for some jquery that will show and hide the div when the button is clicked, and hide the div whenever you click anywhere else. So far I've come up with:</p>
  
  <pre><code>$(document).ready(function () {
      var dropDownButton = $get('&lt;%= DropDownButton.ClientID %&gt;');
      var multiMain = $get('&lt;%= multiMain.ClientID %&gt;');       
  
      dropDownButton.click(function () {           
          if (multiMain.is(":hidden")) {
              multiMain.slideDown("slow");
          }
          else {
              multiMain.slideUp("slow");
          }
          return false;
      });
  
  
      $(document).click(function () {
          multiMain.hide();            
      });
      multiMain.click(function (e) {            
          e.stopPropagation();
      });
  });
  </code></pre>
  
  <p>However, nothing is happening when the drop down button is clicked, or when the rest of the page is clicked I have several of these multi select drop down lists on the page, and I'm really not sure how I sort out the events. Any ideas?</p>