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.

Un-commenting the first one works fine, it fades out the open div. What exactly is the problem? — StephenRios, Mar 25 '14 at 14:56
same question as here maybe, sounds similar? http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it — Vincent Hogendoorn, Mar 25 '14 at 14:56
the problem he wants to close the advanced search screen if he clicks outside of that screen. — Vincent Hogendoorn, Mar 25 '14 at 14:56
if you click out of the scren at least once, with any of my commented scripts, and tries to open menu again with `.advSearch-btn` it closes itself.... so there is a bug I can't figure out. — Coderbit, Mar 25 '14 at 15:11

score 3 · Accepted Answer · answered Mar 25 '14 at 14:58

3

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

answered Mar 25 '14 at 14:58

SparoHawk

557
2
10

it works, I've added few lines to keep the events for buttons to hide in order. `$('.canc').css('display', 'none'); $('.srch').css('display', 'none');` – Coderbit Mar 25 '14 at 15:15
Would you be so kind to drop a few words on how it works like this? – Coderbit Mar 25 '14 at 15:18
1

What we are doing here is tying the a click event to the document itself in order to register those clicks and use it to check for something. `e.target` points to the element that started the event. `parents()` navigates all parent elements starting from the target element, which we then filter to match the class of the container that hosts the search form. The `first()` action is a filter to make it stop once it finds the filter, this is to shorten the internal `while` that jQuery does. And finally we check that a match has been found by checking the length of the resulting object array. – SparoHawk Mar 25 '14 at 15:23

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

1 Answers1