Hide Div With Max-Height Transition

Hide div with CSS and disable mouse events

HTML

<div id="minhaId">
  <h1>Hide-me, please</h1>
  <h2>Bye Bye</h2>
</div>
<button id="click">Hide</button>

CSS

div {
  overflow:hidden;
  max-height: 200px;
  transition: max-height 1s ease-in-out;
}

div.hide {
  max-height: 0;
  pointer-events: none;
}

#minhaId {
  margin: 0 auto;
  width: 80%;
  box-shadow: 0 0 10px grey;
  box-sizing: border-box;
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
}

button {
  width: 100%;
  padding: 5px;
  margin: 10px auto;
  width: 80%;
  display: block;
}

h1,h2{
  margin: 0;
  padding:10px;
}

JavaScript

document.getElementById("click").addEventListener("click",ocultar)

function ocultar() {
  var element = document.getElementById("minhaId");
  element.classList.toggle("hide");
}