JSFiddle - React, Tailwind, and code Playground

by Andrey

HTML

<ul>
  <li class="mainItems">
      one
    <ul class="item hidden">
      <li>
        1
      </li>
      <li>
        1
      </li>
    </ul>
  </li>
  
  <li class="mainItems">
    two
    <ul class="item hidden">
      <li>
        1
      </li>
      <li>
        1
      </li>
    </ul>
  </li>
  
</ul>

CSS

.mainItems{font-size:22px;}
.hidden{display:none;}
.color{color:green;}
.color2{color:blue;}

JavaScript

//https://learn.javascript.ru/searching-elements-dom
//https://learn.javascript.ru/traversing-dom


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

var mainItems = Array.prototype.slice.call(document.getElementsByClassName("mainItems"), 0);
	console.log(mainItems);
	
  
  mainItems.forEach(function(item, i, mainItems){
	item.addEventListener('click', function(event){
  	//alert('alert');
   // console.log(item.childNodes);
   
   item.childNodes[1].classList.remove('hidden');
    console.log(event.target.childNodes[1].classList.toggle('hidden'));
   
		/*if(item == event.target){
			for(i =0; i<item.childNodes.length; i++){
      	console.log(item.childNodes[i]);
        item.childNodes[1].classList.toggle('hidden');}        
      
      //item.classList.remove('hidden');		
		}*/
    //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');
       // document.getElementsByClassName('item')[0].classList.toggle('hidden');
      });
    };*/
    	
    
//forEach
/*mainItems.forEach(function(item, i, mainItems){
	item.addEventListener('click', function(event){
		if(item == event.target){
			item.classList.remove('hidden');		
		}
		else{item.classList.add('hidden');}	
	});
});*/