JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
    <span class="title">Сладости (нажми меня)!</span>
    <ul class="hide">
      <li>Торт</li>
      <li>Пончик</li>
      <li>Пирожное</li>
    </ul>

  </div>

CSS

.menu .title {
  font-size: 18px;
  cursor: pointer;
}
    
.menu .hide {
   display: none;
   margin: 0;
   list-style: none;
   padding:0;
}

.menu .open {
    display: block;
    transition 1s;
}

JavaScript

var menuElem = document.querySelector('.title');
   var menuUl = document.querySelector('.hide');

    menuElem.onclick = function() {
      menuUl.classList.toggle('open');
    };