JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="main">
  <li>
    <span class="btn">Пункт 1(подгруппа)</span>
    <ul class="sub">
     <li>Подпункт 1.1</li>
     <li>Подпункт 1.2  </li>
    </ul>
  </li>
  <li>
    <span class="btn">Пункт 2 (подгруппа)</span>
    <ul class="sub">
     <li>Подпункт 2.1</li>
     <li>Подпункт 2.2  </li>
    </ul>
  </li>
</ul>

CSS

.sub {
  display: none;
}

.btn {
  cursor: pointer;
  user-select: none;
}

.main li.open .sub {
  display: block;
}

JavaScript

document.querySelectorAll('.btn').forEach(el => {
    el.addEventListener('click', function() {
    		if (this.parentElement.classList.contains('open')) {
        	this.parentElement.classList.remove('open');
        } else {
        	this.parentElement.classList.add('open');
        }
    });
});