Animating Height Property

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<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;
  padding: 12px;
  transition: 2s height;
}

.content {
  height: auto;
  display: none;
}

.content.visible {
  display: block;
}

JavaScript

function toggle(){
  $(".content").toggle("fast");
}