JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<span id="clickArea">click area</span>
  <ul id="menu" style="display: none;">
    <li>hej</li>
    <li>hej</li>
    <li>hej</li>
    <li>hej</li>
    <li>hej</li>
  </ul>

CSS

#clickArea {
  border: 1px solid red;
  width: 80px;
}

#menu {
  border: 1px solid blue;
  width: 80px;
  margin: 0px;
}

JavaScript

const menu = document.querySelector("#menu")
const clickArea = document.querySelector("#clickArea")



clickArea.addEventListener("click", (e) => toggleDislay(e)) 
menu.addEventListener("click", (e) => e.stopPropagation()) 

document.addEventListener("click", (e) => toggleDislay(e, "block"))

function toggleDislay(e, display) {
  e.stopPropagation();
  if (!display) display = menu.style.display
  
  if (display == "none") {
      menu.style.display = "block"
  } else {
    menu.style.display = "none"
  }
}