JSFiddle - React, Tailwind, and code Playground

transition menu css js

by hronic

HTML

<div id="menu" class="menu">
  <span class="title">нажми!</span>
  <ul>
    <li>Торт</li>
    <li>Пончик</li>
    <li>Пирожное</li>
  </ul>
</div>

  <div>
    content text
  </div>

CSS

.menu {
      overflow: hidden;
    }
    .menu ul {
      list-style-type: none;
      padding:0;
      margin:5px 0 0 20px;
      max-height: 0;
      transition: all 0.5s ease-in-out;
    }
    .menu span {
      color: green;
    }
    .menu span:hover {
      cursor: pointer;
    }
    .menu .title:before{
         content:'▶ ';
    }
    .menu.open ul {
       max-height: 600px;
    }
    .menu.open .title:before{
      content:'▼ ';
    }

JavaScript

var m = document.getElementById('menu'),
      link = m.querySelector('.title');
      
    link.addEventListener('click',clicked);
  
  function clicked(){
    m.classList.toggle('open');
  }