Check out this js+html/css project I worked on: http://jsfiddle.net/A1ex5andr/xpRrf/
It functions as intended - opening and closing with the use of .advSearch-btn to open/close, and .advSearch-control .canc to close. However, I am facing an issue where it doesn't close when clicked outside the <div class="advSearch">
Here is the HTML code:
<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>
This is the working JavaScript 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');
});
I've attempted these methods for closing on click outside the div: (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 could be the issue here? Thank you for your help in advance.