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;
}

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) {
    //console.log(event.target.childNodes[1].classList);

    for (i = 0; i < mainItems.length; i++) {
      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]);


  });

};






/* mainItems.forEach(function(item, i, mainItems){
	item.addEventListener('click', function(event){
  	//alert('alert');
    console.log('item', item);
    console.log(item.childNodes);
   
   item.childNodes[1].classList.add('hidden');
   console.log('item', item.childNodes[1]);
    event.target.childNodes[1].classList.remove('hidden');
    console.log('event',event.target.childNodes[1]);
   
   
		
    //item.childNodes[1].classList.add('hidden');
		//else{item.childNodes.classList.add('hidden');}	
	});
});*/



/* 	for(var i = 0; i<mainItems.length; i++){
  	//mainItems[i].classList.add('color');
    mainItems[i].addEventListener('click', function(event){
    	//console.log(this);
      console.log('sdf', event.target);
      event.target.classList.toggle('mainItems');
      //this.classList.toggle('mainItems');
     event.target.classList.add('color');
    	for(var i = 0; i<mainItems.length; i++){
      	 if(mainItems[i] !== this){
     	mainItems[i].classList.add('color2');
      	this.classList.remove('color2');
     	} 
     };
   
      
      
      var chi = this.childNodes[1];
      console.log(chi);
      chi.classList.toggle('hidden');
     //...