JSFiddle - React, Tailwind, and code Playground

by Mark Ulybkin

HTML

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

CSS

.menu ul {
      margin: 0;
      list-style: none;
      padding-left: 20px;
      display: none;
    }

    .menu .title::before {
      content: url(http://www.iconsearch.ru/uploads/icons/nuvola2/32x32/2rightarrow.png);
      font-size: 80%;
      color: green;
    }

    .menu .title::before {
      content: url(http://abali.ru/wp-content/uploads/2012/10/arrow_down.png);
    }

    .menu.open ul {
      display: block;
    }

JavaScript

var menuElem = document.getElementById('sweet');
    var titleElem = menuElem.querySelector('.title');

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