title: JS to show/hide/close if out of the div
body: <p>I wrote this js+html/css <a href="http://jsfiddle.net/A1ex5andr/xpRrf/" rel="nofollow">http://jsfiddle.net/A1ex5andr/xpRrf/</a>
  Tt works as it should to:
  open/close on .advSearch <code>.advSearch-btn</code>
  close on <code>.advSearch-control .canc</code>
  but I can't make it to close, if mouse is clicked anywhere out of the <code>&lt;div class="advSearch"&gt;</code></p>
  
  <p>Html part </p>
  
  <pre><code>&lt;div class="advSearch"&gt;
     &lt;span class="advSearch-btn"&gt;Advanced Search&lt;/span&gt;
    &lt;div class="advSearch-container"&gt;
      &lt;div class="col left"&gt;
        &lt;h3&gt;Customer&lt;/h3&gt;
        &lt;form action=""&gt;
          &lt;label&gt;&lt;h4&gt;First Name&lt;/h4&gt; &lt;input type="text"&gt; &lt;/label&gt;
          &lt;label&gt;&lt;h4&gt;Last Name&lt;/h4&gt; &lt;input type="text"&gt; &lt;/label&gt;
          &lt;label&gt;&lt;h4&gt;Email&lt;/h4&gt; &lt;input type="text"&gt; &lt;/label&gt;
          &lt;label&gt;&lt;h4&gt;Phone&lt;/h4&gt; &lt;input type="text"&gt; &lt;/label&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="col central"&gt;
        &lt;h3&gt;Address&lt;/h3&gt;
        &lt;form action=""&gt;
          &lt;label&gt;&lt;h4&gt;Adsress&lt;/h4&gt; &lt;input type="text"&gt; &lt;/label&gt;
          &lt;label&gt;&lt;h4&gt;City&lt;/h4&gt; &lt;input type="text"&gt; &lt;/label&gt;
          &lt;label&gt;&lt;h4&gt;State&lt;/h4&gt; &lt;input type="text"&gt; &lt;/label&gt;
          &lt;label&gt;&lt;h4&gt;Zip&lt;/h4&gt; &lt;input type="text"&gt; &lt;/label&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="col right"&gt;
        &lt;h3&gt;Other&lt;/h3&gt;
         &lt;form action=""&gt;
          &lt;label&gt;&lt;h4&gt;Policy&lt;/h4&gt; &lt;input type="text"&gt; &lt;/label&gt;
          &lt;label&gt;&lt;h4&gt;App ID&lt;/h4&gt; &lt;input type="text"&gt; &lt;/label&gt;
          &lt;label&gt;&lt;h4&gt;Quote&lt;/h4&gt; &lt;input type="text"&gt; &lt;/label&gt;
          &lt;label&gt;&lt;h4&gt;&lt;/h4&gt; &lt;input type="text"&gt; &lt;/label&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;div class="advSearch-control"&gt;
      &lt;button class="canc"&gt;Cancel&lt;/button&gt;
      &lt;button class="srch"&gt;Search&lt;/button&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>js that works</p>
  
  <pre><code> // advanced search show/hide and buttons callBack
      var container = $(".advSearch-container");
      // Bind the link to toggle the slide.
      var slideAdvancedSearch = function() {
          // Toggle the slide based on its visibility
          if (container.is(":visible")) {
              // Hide - slide up.
              $('.canc').css('display', 'none');
              $('.srch').css('display', 'none');
              container.slideUp(1000);
          } else {
              // Show - slide down.
              container.slideDown(1000, function() {
                  $('.canc').css('display', 'inline-block');
                  $('.srch').css('display', 'inline-block');
  
                  // $(document).click(function() {
                  //     if (container.is(":visible")) {
                  //         container.fadeOut(300);
                  //     } else {
                  //         e.stopPropagation();
                  //         console.log('its stoped');
                  //     }
                  // });
  
                  // $(document).click(function(event) {
                  //     if ($(event.target).parents().index(container) == -1) {
                  //         if (container.is(":visible")) {
                  //             container.hide()
                  //         }
                  //     }
                  // })
  
              });
          }
      };
  
      //run slide on AdvSearch button
      $(".advSearch-btn").click(function() {
          slideAdvancedSearch();
      });
  
      //run slide on Cancel button
      $('.canc').click(function(event) {
          slideAdvancedSearch();
      });
  
      // Modified Date sort arrow
      var sortArrow = $('.sortArrow');
      sortArrow.click(function(event) {
          $(this).toggleClass('up');
      });
  </code></pre>
  
  <p>My tries to make close on mouse click out ouf :
  (commented in code that works)</p>
  
  <pre><code>             $(document).click(function() {
                   if (container.is(":visible")) {
                       container.fadeOut(300);
                   } else {
                       e.stopPropagation();
                       console.log('its stoped');
                   }
               });
  </code></pre>
  
  <p>or                    </p>
  
  <pre><code>             $(document).click(function(event) {
                   if ($(event.target).parents().index(container) == -1) {
                       if (container.is(":visible")) {
                           container.hide()
                       }
                   }
               })
  </code></pre>
  
  <p>The question is what am I doing wrong?
  Thank you in advance. </p>