JSFiddle - React, Tailwind, and code Playground

by santosh_patnala

HTML

<div class="dropdown">
  <button onclick="myFunction(this);" class="dropbtn">Dropdown1</button>
  <div id="myDropdown1" class="dropdown-content">
    <ul class="formParent">
          <li><label><input type="checkbox" class="chkBox" />Apple</label></li>
          <li><label><input type="checkbox" class="chkBox" />Orange</label></li>
          <li><label><input type="checkbox" class="chkBox" />Grapes</label></li>
          <li><label><input type="checkbox" class="chkBox" />Berry</label></li>
          <li><label><input type="checkbox" class="chkBox" />Mango</label></li>
          <li><label><input type="checkbox" class="chkBox" />Banana</label></li>
          <li><label><input type="checkbox" class="chkBox" />Tomato</label></li>
          <li><button type="button" class="checkall" onClick="checkAll()">Select</button></li>
        </ul>
  </div>
</div>
<!-- Added 2nd dropdown ! -->
<div class="dropdown">
  <button onclick="myFunction(this);" class="dropbtn">Dropdown2</button>
  <div id="myDropdown2" class="dropdown-content">
    <ul class="formParent">
          <li><label><input type="checkbox" class="chkBox" />Apple</label></li>
          <li><label><input type="checkbox" class="chkBox" />Orange</label></li>
          <li><label><input type="checkbox" class="chkBox" />Grapes</label></li>
          <li><label><input type="checkbox" class="chkBox" />Berry</label></li>
          <li><label><input type="checkbox" class="chkBox" />Mango</label></li>
          <li><label><input type="checkbox" class="chkBox" />Banana</label></li>
          <li><label><input type="checkbox" class="chkBox" />Tomato</label></li>
          <li><button type="button" class="checkall" onClick="checkAll()">Select</button></li>
        </ul>
  </div>
</div>

CSS

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #ddd
}

.show {
  display: block;
}

JavaScript

/* When the user clicks on the button, 
closes every dropdowns and open the only one passed as argument */

/* Javascript only */
function myFunction(element) {
  var dropdowns = document.getElementsByClassName("dropdown-content");
  
  // element.nextSibling is the carriage return… The dropdown menu is the next next.
  var thisDropdown = element.nextSibling.nextSibling;
  
  if (!thisDropdown.classList.contains('show')) {  // Added to hide dropdown if clicking on the one already open
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      dropdowns[i].classList.remove('show');
    }
  }
  
  // Toggle the dropdown on the element clicked
  thisDropdown.classList.toggle("show");
}

/* W3Schools function to close the dropdown when clicked outside. */
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn') && !event.target.closest('.formParent')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}


//CHECKBOX FUNCTIONALITY START
var isChecked = false;
function checkAll() {
    var checkboxes = document.getElementsByClassName('chkBox');
     if (isChecked) {
         for (var i = 0; i < checkboxes.length; i++) {
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = true;
                 
             }
         }
     } else {
         for (var i = 0; i < checkboxes.length; i++) {
             console.log(i)
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = false;
             }
         }
     }
  isChecked = !isChecked;
 }