Animating Height Property

by Lubos Menus

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 {
  display: none;
}

.content.visible {
  display: block;
}

JavaScript

function toggle () {
  var content = document.getElementsByClassName('content')[0];
  
  var test = content.classList.contains('visible');
  
  test ? content.classList.remove('visible') :
  content.classList.add('visible');
}