как вызвать CCS над кнопкой

Question

Мне нужна кнопка в качестве триггера для анимации css. это просто что-то из базового c, но я все испортил. в чем моя ошибка почему ничего не происходит при нажатии кнопки?

<div id="box">
  <a href="#" class="close-box" onclick="closeMenu()">&times;</a>
</div>
<button type="button" onclick="xyz()">Click Me!</button>
<script>
  function xyz(){
  document.getElementById('box').classList.toggle(active)
}
</script>

#box{
  position: absolute;
  top: -120%;
  left: 20%;
  width: 60%;
  height: 60%;
  background: #000;
  transition: .5s;
  opacity: 0.7;

}
#box.active{
  top: 20%;
}
#box a{
  font-size: 3em;
  margin:0;
  padding: 0;
  color: #fff;
}

Answer 1

Кажется, проблема в том, что вы должны указать имя класса в виде строки.

document.getElementById('box').classList.toggle('active')

Так что 'active', между одинарными или двойными кавычками.