Hide div when clicked outside without using window and document object

Question

How can I hide a <div> when I click outside it using onblur? I tried with the code below, but when I click the checkbox it disappears, and when I click outside of it, it won’t disappear.

I then tried using window or document object which works, but is not supported by the platform that I’m currently using. I'm using Lightning platform

Is this otherwise possible using JavaScript and/or CSS?

var expanded = false;

function showshow() {
  var show = document.getElementById("show");

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

function hideshow() {
  var show = document.getElementById("show");

  if (expanded) {
    show.style.display = "none";
    expanded = false;
  }
}

#show {
  position: absolute;
  width: 200px;
  display: none;
  border: 1px solid #000000;
  background-color: #ffffff;
}

#show label {
  display: block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#show label:hover {
  background-color: #eff1f4;
}

<form id="input-form">
  <button type="button" onclick="showshow()">Select an option</button>

  <div id="show" tabindex="1" onblur="hideshow()">
    <label for="OptionA">
<input type="checkbox" id="OptionA" value="Option A" />Option A</label>
    <label for="OptionB">
<input type="checkbox" id="OptionB" value="Option B" />Option B</label>
    <label for="OptionC">
<input type="checkbox" id="OptionC" value="Option C" />Option ABCDEFGHIJKLMNOPQRSTUVWXYZ</label>
  </div>
</form>

Answer 1

Make show focused when expanded, to hide onblur afterwords:

var expanded = false;

function showshow() {
  var show = document.getElementById("show");

  if (!expanded) {
    show.style.display = "block";
    show.focus(); // make show focused
    expanded = true;
  } else {
    show.style.display = "none";
    expanded = false;
  }
}

function hideshow() {
  var show = document.getElementById("show");

  if (expanded) {
    setTimeout(() => {
      show.style.display = "none";
      expanded = false;
    }, 100);
  }
}

#show {
  position: absolute;
  width: 200px;
  display: none;
  border: 1px solid #000000;
  background-color: #ffffff;
}

#show label {
  display: block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#show label:hover {
  background-color: #eff1f4;
}

<form id="input-form">
  <button type="button" onclick="showshow()">Select an option</button>

  <div id="show" tabindex="1" onblur="hideshow()">
    <label for="OptionA">
    <input type="checkbox" id="OptionA" value="Option A" />Option A</label>
    <label for="OptionB">
    <input type="checkbox" id="OptionB" value="Option B" />Option B</label>
    <label for="OptionC">
    <input type="checkbox" id="OptionC" value="Option C" />Option ABCDEFGHIJKLMNOPQRSTUVWXYZ</label>
  </div>
</form>

Answer 2

$(document).click(function(event) {

  //if you click on anything except the modal itself or the "open modal" link, close the modal
  
  if (!$(event.target).closest(".modal,.js-open-modal").length) {
  
    $("body").find(".modal").removeClass("visible");
    
  }
});

Answer 3

document.getElementsByTagName("body")[0].addEventListener("click", function(){
  if(event.target.parent.id !== "idOfYourDiv") {
    // call hideshow() function
  }
});