Hide Div tag if outside of Div is clicked on

[bhuvragu]

Hi ,
Refer to my previous post "Arrow keys Scrolling on Div" , I created a text search with html_ajax.
When you type text , it would display the search result in dropdown box under the textbox like in google suggest. When you click on a drop-down text , it will be placed into the text field and Dropdown (Div tag) disappers using a function hide('div tag id') .

I used only html , javascript and html_ajax.

I want to hide the Div (Dropdown box) when i click on outside of the dropdown list. thats body of the page.

could anyone please give me an idea for doing it ASAP?

Thanks in advance for the help.

Regards
ragu

[Romulo NF]

function hide(id) {
elm = document.getElementById(id)
 
elm.style.display == "none" ? elm.style.display = "block" : elm.style.display = "none"
}
 
document.onmousedown = function() {
hide('hide')
}
 

<div style="height:100px; width:100px; border:1px solid #000" id="hide"></div>
 

Good luck

[bhuvragu]

Hi Romulo ,

Thanks a lot.

Regards
ragu