Javascript onmouseover stop menu

I have this small menu. All I want is to open it with one click and then to close it with another click outside the html element.

I figured out only how to open it with a click but don’t know how to close it:

• HTML portion:

<div id="sign"onclick="setVisibility()">
  login
  <div id="user"></div>
  <br>
  <p id="userl">Streamer1228</p><br>
  <div id="userll"  >PREMIUM USER</p><br>
  <button id="logout"  >Logout</button>
</div>

• JavaScript code:

function setVisibility() {
  document.getElementById("sign").style.height="350px";
}

Answer

One solution is using an if condition:

function setVisibility() {
if (document.getElementById("sign").style.height=="350px"){
document.getElementById("sign").style.height="0px";} else {
document.getElementById("sign").style.height="350px";} 
}