Click outside and close the div is not working

Question

I'm trying to close the div by clicking outside of the div, but it only works partially... I want to apply this to both ".map-detail" and ".image-detail". Currently, this function only works for ".hint-description" and ".answer-description", don't know why this feature isn't applicable for the other divs...

When I add ".map-detail" and ".image-detail" section to the e.target function, "mapFunction()" and "imageFunction()" button is unclickable.

const hintBtn = document.querySelector(".hint-selection");
const hintWhiteBtn = document.querySelector(".hint-description");
const answerWhiteBtn = document.querySelector(".answer-description");
const hideBox = document.querySelector(".hide");
const hintDetailId = document.querySelector(".hint-detail");
const mapDetail = document.querySelector(".map-detail");
const imageDetail = document.querySelector(".image-detail");

let usedHintCount = 0;

function hintSelectFunction() {
  imageDetail.style.display = "none";
  mapDetail.style.display = "none";
  if (
    hintBtn.style.display === "none" ||
    hintWhiteBtn.style.display === "flex"
  ) {
    hintBtn.style.display = "flex";
    hintWhiteBtn.style.display = "none";
  } else {
    hintBtn.style.display = "none";
    hintWhiteBtn.style.display = "none";
  }
}

function hintFunction() {
  document.querySelector(".select-answer-inactive").src =
    "images/answer-white.png";
  if (hintWhiteBtn.style.display === "none") {
    hintWhiteBtn.style.display = "flex";
    hintBtn.style.display = "none";
  } else {
    hintWhiteBtn.style.display = "none";
  }
}

function answerFunction() {
  if (answerWhiteBtn.style.display === "none") {
    answerWhiteBtn.style.display = "flex";
    hintBtn.style.display = "none";
  } else {
    answerWhiteBtn.style.display = "none";
  }
}

function mapFunction() {
  mapDetail.style.display = "none";
  hintBtn.style.display === "none";
  answerWhiteBtn.style.display = "none";
  hintWhiteBtn.style.display = "none";
  if (mapDetail.style.display === "none") {
    mapDetail.style.display = "flex";
  } else {
    mapDetail.style.display = "none";
  }
}

function imageFunction() {
  mapDetail.style.display = "none";
  hintBtn.style.display === "none";
  answerWhiteBtn.style.display = "none";
  hintWhiteBtn.style.display = "none";
  if (imageDetail.style.display === "none") {
    imageDetail.style.display = "flex";
  } else {
    imageDetail.style.display = "none";
  }
}

document.onclick = function (e) {
  if (
    e.target.className !== "nav-bar-top" &&
    e.target.className !== "select-hint" &&
    e.target.className !== "select-answer-inactive" &&
    e.target.className !== "nav-bar-details" &&
    e.target.className !== "image-detail" &&
    e.target.className !== "map-detail"
  ) {
    answerWhiteBtn.style.display = "none";
    hintWhiteBtn.style.display = "none";
    imageDetail.style.display = "none";
    mapDetail.style.display = "none";
  }
};

      <div class="nav-bar">
        <div class="nav-bar-top">
          <button onclick="imageFunction()">
            <i class="fa-regular fa-image fa-2x"></i>
          </button>
          <button onclick="mapFunction()">
            <i class="fa-regular fa-map fa-2x"></i>
          </button>
          <button onclick="hintSelectFunction()">
            <i class="fa-regular fa-lightbulb fa-2x"></i>
          </button>
        </div>
        <div class="nav-bar-details center hidden">
          <div class="image-detail hidden">
            <img
              class="place-image"
              src="https://drive.google.com/uc?id=1ntBda2sXU__K57g1yoixt3YGyJOgF0Rp"
            />
            <span class="marT20">🔎 Find thsi place!</span>
          </div>
          <div class="map-detail hidden">
            <div class="mission-map"></div>
          </div>
          <div class="hint-selection hidden">
            <button onclick="hintFunction()">
              <img class="select-hint" src="images/hint-white.png" />
            </button>
            <button onclick="answerFunction()">
              <img
                class="select-answer-inactive"
                src="images/answer-gray.png"
              />
            </button>
          </div>
          <div class="hint-description hint-detail hidden">
            <span
              >💡 List the alphabets that would be filled in the blanks.</span
            >
          </div>
          <div class="answer-description hint-detail hidden">
            <span>✔️ The Answer is "YELLOW"</span>
          </div>
        </div>
      </div>

Answer 1

This look like dropdown examples or pop-up menus.

 document.onclick = function (event) {

    if (!event.target.matches('.map-detail') && !event.target.matches('.image-detail')) {
         // you code for out of two divs
     }

 };