Collapse Dropdown of Select Box

Question

I am working on custom select drop-down which has check-boxes for multiple selections which I Have got from this question.

The problem is once the drop-down expands, it doesn't collapse as in a regular select box when you click anywhere outside.

HTML:

    <form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
        <input type="checkbox" id="one" />First checkbox</label>
                <span class="caret"> </span>
      <label for="two">
        <input type="checkbox" id="two" />Second checkbox</label>
      <label for="three">
        <input type="checkbox" id="three" />Third checkbox</label>


    </div>
  </div>
</form>

CSS:

    .multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
  height: 100px;

}

#checkboxes label {
  display: block;


}

#checkboxes label:hover {
  background-color: #1e90ff;
}

.caret {
    border-top: 4px solid #919da9;
}

JavaScript:

    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;
  }
}

Here is the Fiddle

It collapses only when you click on select, the reason could be as it doesn't have any options. Instead, it has an input type.

Answer 1

Add an event listener for click on the document. Then within that listener, check to see if the click happened on the dropdown or on the options, if so, do nothing(so the user can still open the dropdown and select options), otherwise hide the options:

var expanded = false,
  checkboxes = document.getElementById("checkboxes");

function showCheckboxes() {
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

document.addEventListener("click", function(event) {
  // If click on dropdown/options do nothing
  if (event.target.closest(".selectBox, #checkboxes")) return;
  // Otherwise hide the options
  checkboxes.style.display = "none";
});

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
  height: 100px;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

.caret {
  border-top: 4px solid #919da9;
}

<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    
    <div id="checkboxes">
      <label for="one">
        <input type="checkbox" id="one" />First checkbox</label>
      <span class="caret"> </span>
      <label for="two">
        <input type="checkbox" id="two" />Second checkbox</label>
      <label for="three">
        <input type="checkbox" id="three" />Third checkbox</label>
    </div>
  </div>
</form>