JSFiddle - React, Tailwind, and code Playground

by ti2005

HTML

<form>
  <div class="multiselect">
    <div onclick="showCheckboxes()">
      <select>
   <option value="" disabled selected>Select options</option>
      </select>
    </div>
    

    <div id="checkboxes">
      <label for="one">
        <input type="checkbox" id="one" />First option</label>
      <label for="two">
        <input type="checkbox" id="two" />Second option</label>
      <label for="three">
        <input type="checkbox" id="three" />Third option</label>
      <label for="three">
       <input type="checkbox" id="fourth" />fourth option</label>
    </div>
  </div>
</form>

CSS

.multiselect {
  width: 200px;
}

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

#checkboxes label {
  display: block;
}

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

JavaScript

var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  console.log(this.expanded);
  if (!this.expanded) {
    checkboxes.style.display = "block";
    this.expanded = true;
  } else {
    checkboxes.style.display = "none";
    this.expanded = false;
  }
}