Анимация через toggleClass

const btn = document.querySelector('div[role="button"]'), 
      menu = document.querySelector('.menu'); 
 
btn.onclick = () => { 
  menu.classList.toggle('_opened'); 
}

div[role="button"] { 
  width: 5rem; 
  padding: 1rem; 
  text-align: center; 
  background-color: #ccc5; 
  text-transform: uppercase; 
  cursor: pointer; 
  user-select: none; 
} 
 
.menu._opened { 
  height: 100px; 
} 
 
.menu { 
  height: 0; 
  overflow: hidden; 
  background: #ccc; 
  transition: all 300ms ease-in-out; 
} 
 
.menu ul { 
  list-style-type: none; 
  padding: 0; 
}

<div> 
  <div role="button">Toggle</div> 
  <div class="menu"> 
    <ul> 
      <li>lorem</li> 
      <li>dolor</li> 
      <li>sit</li> 
      <li>amet</li> 
    </ul> 
  </div> 
</div>