Animating Height Property

HTML

<div class="wrapper" onclick="toggle()">
  I want to be animated!
  <div class="content">
    Was I revealed in a timely fashion?
  </div>
</div>

CSS

.wrapper {
  background: red;
  color: white;
  height: auto;
  padding: 12px;
  transition: 2s height;
}

.content {
  height: 0px;
  display: block;
  transition: 2s height;
  overflow: hidden;
}

JavaScript

function toggle () {
  var content = document.getElementsByClassName('content')[0];
  
  var test = content.classList.contains('visible');
  console.log(test);
  
  if (test) {
    content.classList.remove('visible')
    content.style.height = "0px";
  } else {
    content.classList.add('visible');
    content.style.height = content.scrollHeight + "px";
  } 
}