<button class="toggle-button">Toggle button</button>
<div class="content">
<div class="box">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</div>
.content {
box-sizing: border-box;
width: 15em;
color: white;
background-color: black;
height: 0;
text-align: center;
transition: all .3s ease-out 0s;
}
.box{
margin:1em;
padding:3em;
}
$('.toggle-button').on('click', function(){
var content = $('.content')[0];
content.style.height = content.style.height === content.scrollHeight + 'px'
? 0
: content.scrollHeight + 'px';
});
This Pen doesn't use any external CSS resources.