How to make this area display: none?

Question

I'm making a web application. First see this image:

Now, you can see the area outlined by yellow line. The list with white background is dynamic (It is displayed when something is typed in search bar). Now what I want is when I click anywhere out of this area (Search input field + List), the list should be display: none. I've tried a few things but for that I had to write a lot of code as I did this for different divs separately.

Also, I don't want to paste the whole code here as it is too long. So I'm just providing you HTML to get an idea of this picture.

<header>
    <div id="headerdiv">
        <div class="headerlogo"><a href="/passwords/home.php"><img src="#" alt="Passwords"></a></div>
        <div class="quit"><img src="#" alt="Quit"></div>
    </div>
</header>
<div id="functions">
    <div id="funcLeft">
        <div id="addbuttonwrap"><input class="addbutton" type="button" value="  +              ADD"></div>
        <div class="heading1">Your saved passwords</div>
        <input class="funcbutton" type="button" value="EMAIL">
        <input class="funcbutton" type="button" value="CAREER">
        <input class="funcbutton" type="button" value="SOCIAL">
        <input class="funcbutton" type="button" value="OTHER">
    </div>
    <div id="funcRight">
        <div id="search">
            <form name="searchform" method="post" action="">
                <input type="text" name="searchinput" placeholder="Enter any keyword">
            </form>
        </div>
        <div class="heading1 heading2">GUIDELINES</div>
        <div class="slides">
            <!--CONTENT-->
        </div>
    </div>
</div>
<footer>
    <div id="footer">
        Copyright: Protected
    </div>
</footer>

NOTE: While writing answer, you can assume any TAG Name/class/ID etc. for any element as code is not sufficient. I just want to know what to do.

If you know many sites have this functionality. e.g. Facebook. How do they do it? — , Jul 19 '16 at 06:19
please provide the code .,or find the clicked element on the body , decide on it — Ray, Jul 19 '16 at 06:23
I think you can solve it in the similar way we do for popups. For Ex : We show a popup based on a button click or something and when the user clicks outside the popup, the popup disappears. Please check the link : http://stackoverflow.com/questions/10666179/how-to-hide-a-popup-by-clicking-outside — 5eeker, Jul 19 '16 at 06:25

score 0 · Answer 1 · answered Jul 19 '16 at 06:29

0

You want to hide the search when someone clicks away, you can do this with Javascript with a onclick event.

var elementToHide = document.getElementById("searchElement");
window.onclick = function(e){
    if(e.target != elementToHide){
        elementToHide.style.display = "none";
    }
}

This will hide the element contained in elementToHide (can be any element in the DOM) when the user clicks on an element which is not this one.

The variable e contains the click event of which we check the target element in the if

Hope it helps

answered Jul 19 '16 at 06:29

RDardelet

564
3
11

This will also hide the list when I will click the search bar, which is not intended. – Jul 19 '16 at 06:37
You can simply change the `elementToHide` variable to have what you want to act as a search element (or wrap the whole search elements in a container and target that container) – RDardelet Jul 19 '16 at 06:39
Not working doesn't mean much, what code did you use and what do you get in console? – RDardelet Jul 19 '16 at 07:20
This comparison is not valid I think. I tried this: $(document).click(function(event){ var $click=$(event.target); var $click2=$("#search input"); if(event.target===$click2){ //$("#suggestions").css("display", "none"); console.log("hello"); } }); – Jul 19 '16 at 07:31

Pajar Fathurrahman · Answer 2 · 2016-07-19T06:34:42.490

0

 $(document).on("click", function(e) {
    if(e.target.className != "search_element"){
       $("#element_list").hide();
    }
 });

you can try this.

edited Jul 19 '16 at 06:34

answered Jul 19 '16 at 06:31

Pajar Fathurrahman

991
1
9
19

1

This does not answer his problem, it will hide the element wherever the user clicks (even if the user clicks on the search element) – RDardelet Jul 19 '16 at 06:32
how if add condition for some elements? – Pajar Fathurrahman Jul 19 '16 at 06:35
How do I write if statement if my search element is a div (#search) and inside it is a form with an input? – Jul 19 '16 at 06:52
you can add class for every preventive element from close "#element_list", example (#search,#form_serach,#input_search) add class "search_element" – Pajar Fathurrahman Jul 19 '16 at 07:05
The comparison is not working. To test it, I did this: $(document).click(function(event){ var $click=$(event.target); var $click2=$("#search input"); if(event.target===$click2){ //$("#suggestions").css("display", "none"); console.log("hello"); } }); – Jul 19 '16 at 07:31

score 0 · Answer 3 · answered Jul 19 '16 at 07:07

0

i think you are looking for a js free solution (or easiest approach). I would personally recommend using + and :focus operator from css

.search-with-submenu{
  .submenu{
    display: none;
  }
  input[type=search]:focus + .submenu{
    display: block;
  }
}

answered Jul 19 '16 at 07:07

FE Bear

111
3

in case you have concern about browser compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors#Browser_compatibility – FE Bear Jul 19 '16 at 07:17

How to make this area display: none?

3 Answers3