JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<h3 id='clickMe'><span id="arrow">^</span>click</h3>
  <ul id="nav">
    <li>Торт</li>
    <li>Торт</li>
    <li>Торт</li>
  </ul>
</div>

CSS

* {
  margin:0;
  padding:0;
}
#clickMe {
  cursor:pointer;
  padding-left: 25px;
}

#nav {
  display:none;
}

#arrow {
    position:absolute;
    left: 5px;
    top: 2px;
}
#arrow.rotaited {
  transform: rotate(180deg);
}

JavaScript

var el = document.getElementById('clickMe');
el.addEventListener('click', menHidden);
function menHidden() {
	const navBar = document.getElementById('nav');
  const arrow = document.getElementById('arrow');
  if (getComputedStyle(navBar).display == 'none') {
  	navBar.style.display = 'block';
    arrow.className = 'rotaited';
  } else {
  	navBar.style.display = 'none';
    arrow.className = 'normal';
  }
}