JSFiddle - React, Tailwind, and code Playground

by Andrey

HTML

<ul>
  <li class="mainItems" >
    One
    <ul class="item hidden wer">
      <li>
        1
      </li>
      <li>
        1
      </li>
    </ul>
  </li>

  <li class="mainItems">
    Two
    <ul class="item hidden">
      <li>
        2
      </li>
      <li>
        2
      </li>
    </ul>
  </li>

</ul>

CSS

.mainItems {
  font-size: 22px;
}

.hidden {
  display: none;
}

.color {
  color: green;
}

.color2 {
  color: blue;
}
.active{
  background:red;
}

JavaScript

//var mainItems = document.getElementsByClassName("mainItems");

var mainItems = Array.prototype.slice.call(document.getElementsByClassName("mainItems"), 0);
//console.log(mainItems);

for (i = 0; i < mainItems.length; i++) {
  mainItems[i].addEventListener('click', function(event) {
   		
    
    for (i = 0; i < mainItems.length; i++) {
    mainItems[i].classList.remove('active');
    event.target.classList.add('active');
    
      if (mainItems[i] !== event.target) {
        //alert('sdsdsdgerg');
        mainItems[i].childNodes[1].classList.add('hidden');
      };
      //console.log(mainItems[i]);
      

    }

    event.target.childNodes[1].classList.toggle('hidden');


    // mainItems[i].childNodes[1].classList.remove('hidden');
    // console.log('child', mainItems[i].childNodes[1]);


  });

};