title: JQuery onclick to show a div class - clicking itself/outside the div would make it disappear, BUT not other clickable elements?
body: <p>On my website, I have 3 multi-select dropdowns that need to close when I click on other clickable elements.
  This is what I mean:</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/xkzf4wzs/1/" rel="nofollow">http://jsfiddle.net/xkzf4wzs/1/</a></p>
  
  <p>When you click on the first green button then you click on the second, the first button's content should disappear.
  I'm using this Jquery code to make the div content disappear when I click the parent or outside of its own div.
  The thing is the content doesn't disappear when I click on any other 'clickable' elements, like the other dropdowns or checkboxes on other pages.</p>
  
  <p>How do I make the first content disappear when  I click on the second button?</p>
  
  <p>Code: </p>
  
  <pre><code>$(document).ready(function(){
      $('.click').click(function(event){
          event.stopPropagation();
           $(".showup").slideToggle("fast");
      });
      $(".showup").on("click", function (event) {
          event.stopPropagation();
      });
  });
  
  $(document).on("click", function () {
      $(".showup").hide(); 
  });
  
  
  $(document).ready(function(){
      $('.click2').click(function(event){
          event.stopPropagation();
           $(".showup2").slideToggle("fast");
      });
      $(".showup2").on("click", function (event) {
          event.stopPropagation();
      });
  });
  
  $(document).on("click", function () {
      $(".showup2").hide();
  });
  </code></pre>