var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 148px;
}
.selectBox {
position: absolute;
}
.selectBox select {
width: 148px;
/*font-weight: bold;*/
}
.overSelect {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
height: 120px;
overflow-y : scroll;
width: 148px;
font-size: 13px;
}
#checkboxes label {
display: block;
position: relative;
/*overflow: visible;*/
z-index: 10;
background-color: white;
}
#checkboxes label:hover {
background-color: #1e90ff;
color: white;
}
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select name="abc" style="width: 150px" title="Input the name" id="abc">
<option>Select</option>
</select>
<div class="overSelect"></div>
<div id="checkboxes">
<label for="1"><input type="checkbox" name="multipleteams" id="1" value ="1"/>No1</label>
<label for="2"><input type="checkbox" name="multipleteams" id="2" value ="2"/>No2</label>
<label for="3"><input type="checkbox" name="multipleteams" id="3" value ="3"/>No3</label>
</div></div></div>
Can some one help me and close this dropdown div when i click outside anywhere in the page. No jquery to be used as my application will not allow it. It ruins the other screens.
I need pure Javascript code
Thanks well in advance.