CodePen Embed - display none transition

<button>click</button>
<div></div>

/* box */
div {
  display: none;
  width: 100%;
  height: 0vh;
  margin-top: 10px;
  background: linear-gradient(180deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
  transition: all 0.3s;
}
.act {
  display: block;
  height: 60vh;
}

/* button */
button {
  background-color: skyblue;
  padding: 10px 15px;
  border: transparent;
  border-radius: 10px;
  color: #fff;
}

const btn = document.querySelector('button');
const box = document.querySelector('div');

// div 클릭 시 act 클래스 토글
btn.addEventListener('click', () => {
  box.classList.toggle('act');
})

This Pen is owned by 김가현 on CodePen.

See more by @Ellen27 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.