<button>Push me</button>
<div class="box"></div>
.box {
  width: 100%;
  height: 20px;
  background: pink;
  margin-top: 20px;
  transition: height .5s;
}

.box.active {
  height: 200px;
}
const button = document.querySelector('button');
const box = document.querySelector('.box');

button.addEventListener('click', e => {
    box.classList.toggle('active');                  
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.