<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');
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.