JS to show/hide/close if out of the div

Question

I wrote this js+html/css http://jsfiddle.net/A1ex5andr/xpRrf/ Tt works as it should to: open/close on .advSearch .advSearch-btn close on .advSearch-control .canc but I can't make it to close, if mouse is clicked anywhere out of the <div class="advSearch">

Html part

<div class="advSearch">
   <span class="advSearch-btn">Advanced Search</span>
  <div class="advSearch-container">
    <div class="col left">
      <h3>Customer</h3>
      <form action="">
        <label><h4>First Name</h4> <input type="text"> </label>
        <label><h4>Last Name</h4> <input type="text"> </label>
        <label><h4>Email</h4> <input type="text"> </label>
        <label><h4>Phone</h4> <input type="text"> </label>
      </form>
    </div>
    <div class="col central">
      <h3>Address</h3>
      <form action="">
        <label><h4>Adsress</h4> <input type="text"> </label>
        <label><h4>City</h4> <input type="text"> </label>
        <label><h4>State</h4> <input type="text"> </label>
        <label><h4>Zip</h4> <input type="text"> </label>
      </form>
    </div>
    <div class="col right">
      <h3>Other</h3>
       <form action="">
        <label><h4>Policy</h4> <input type="text"> </label>
        <label><h4>App ID</h4> <input type="text"> </label>
        <label><h4>Quote</h4> <input type="text"> </label>
        <label><h4></h4> <input type="text"> </label>
      </form>
    </div>
  <div class="advSearch-control">
    <button class="canc">Cancel</button>
    <button class="srch">Search</button>
  </div>
  </div>
</div>

js that works

 // 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');
    });

My tries to make close on mouse click out ouf : (commented in code that works)

             $(document).click(function() {
                 if (container.is(":visible")) {
                     container.fadeOut(300);
                 } else {
                     e.stopPropagation();
                     console.log('its stoped');
                 }
             });

or

             $(document).click(function(event) {
                 if ($(event.target).parents().index(container) == -1) {
                     if (container.is(":visible")) {
                         container.hide()
                     }
                 }
             })

The question is what am I doing wrong? Thank you in advance.

Answer 1

Try this one. Note that you don't need to create the event when the advanced search is open. Just put it to be loaded normally:

$(document).click(function(e) {
    if($(e.target).parents('.advSearch').first().length == 0)
        container.fadeOut(300);
});