onclick: раскрывающееся меню

by Aleksandr Tomashov

HTML

<div id="sweeties" 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 {
  font-size: 18px;
  cursor: pointer;
}

.menu .title::before {
  content: '▶ ';
  font-size: 80%;
  color: green;
}

.open .title::before {
  content: '▼ ';
}

.open ul {
  display: block;
}

JavaScript

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

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