Hide and open div under certain conditions

Question

I'm having trouble opening and closing a particular search bar.

I need to open a div while focus is in the field and take it out while it does not, but when you click on the div that is open the focus of the field can not be removed or closed.

I tried putting the event in the body, in a higher div however it did not work it continues to close.

Here is the code I have used:

$("input[name='search-input']").blur( function() {
     $(".divCompleteSearch").addClass('hiddendiv');
});

$("input[name='search-input']").focus( function() {
    $(".divCompleteSearch").removeClass('hiddendiv');
});

$(".button-search").on('click', function (e) {
    e.preventDefault();
    $("input[name='search-input']").focus();
    $(".active").removeClass("active");
    $(this).addClass('active');
});

HTML:

In this first image is the div closed, when there is the focus in theinput search it should open the second image, the div should remain open until it clicks anywhere that is not inside thediv open.

VVV · Accepted Answer

You need to remove the blur event and listen to any clicks on the page.

If you look at this fiddle, notice that I wrapped all the HTML in a container named #search-container. Then in the Javascript, I removed the blur() method and added a mouseup() listener on the whole document.

The mouseup() event checks if the user clicked on the container or one of it's children. If not, it closes the div.

$(document).mouseup(function(e) 
{
    var container = $("#search-container");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        $(".divCompleteSearch").addClass('hiddendiv');
    }
});

$("input[name='search-input']").focus( function() {
    $(".divCompleteSearch").removeClass('hiddendiv');
});

$(".button-search").on('click', function (e) {
    e.preventDefault();
    $("input[name='search-input']").focus();
    $(".active").removeClass("active");
    $(this).addClass('active');
});

.hiddendiv { display: none; }

#search-container {
  border:1px solid #ff0000;
}

Hide and open div under certain conditions

Answers (1)

Related Questions