JSFiddle - React, Tailwind, and code Playground

by Philipp Gaponenko

HTML

<ul>
    <li class="clickMenu">
    <p>Пункт</p>
    <ul class="hide">
        <li>Подпункт</li>
        <li>Подпункт</li>
      </ul>
    </li>
    <li class="clickMenu">
      <p>Пункт</p>
      <ul class="hide">
        <li>Подпункт</li>
        <li>Подпункт</li>
      </ul>
    </li>
    <li class="clickMenu">
    <p>Пункт</p>
     <ul class="hide">
        <li>Подпункт</li>
        <li>Подпункт</li>
      </ul>
    </li>
  </ul>

CSS

.hide{
  display: none;
}

ul{
  padding: 0;
}

li {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
  text-align: center;
  margin-top: 10px;
  width: 70px;
}

.active {color:red;}
.active .hide {display:block;}

JavaScript

var clickMenu = document.getElementsByClassName("clickMenu");

for (var i = 0; i < clickMenu.length; i++) {
  clickMenu[i].addEventListener("click", function(){
    
    // Remove active class from siblings.
    _siblings = this.parentNode.childNodes;
    for (var j = 0; j < _siblings.length; j++) {
      if (_siblings[j].nodeType != 3) {
        _siblings[j].classList.remove("active");
      }
    }
    
    // Add active class.
    this.classList.add("active");
  })
}