Close a dropdown Div when clicked outside

Question

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.