如何对齐div使其在单击时从底部浮动/悬停？

<div id="container">
  <div id="floatingDiv">Content</div>
</div>

#container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

#floatingDiv {
  position: absolute;
  bottom: 0;
}

var floatingDiv = document.getElementById("floatingDiv");

floatingDiv.addEventListener("click", function() {
  if (floatingDiv.style.bottom === "0px") {
    floatingDiv.style.bottom = "-100px";
  } else {
    floatingDiv.style.bottom = "0px";
  }
});