<button onclick="showorhide()">toggle</button>
<div class="box" id="box"></div>
.box{
  width:100px;
  height:100px;
  background:yellowgreen;
  visibility:hidden;
  opacity:0;
  transform:translateY(100px);
  transition:.3s;
}
.show{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
}
function showorhide(){
  if(!this.bool){
    document.getElementById('box').classList.add("show")
  }else{
    document.getElementById('box').classList.remove("show")
  }
  this.bool = !this.bool;
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.