JSFiddle - React, Tailwind, and code Playground

by Andrey

HTML

<ul>
  <li class="mainItems">
    <h3 class="mainItemsTitle  help">One <span class="expand">+</span></h3>

    <ul class="item hidden">
      <li class="innerItem">
        1
      </li>
      <li class="innerItem">
        1
      </li>
    </ul>
  </li>

  <li class="mainItems">
    <h3 class="mainItemsTitle help">Two <span class="expand">+</span></h3>
    <ul class="item hidden">
      <li class="innerItem">
        2
      </li>
      <li class="innerItem">
        2
      </li>
    </ul>
  </li>

</ul>

CSS

h3 {
  
}

.mainItemsTitle{
  width: 200px;
  border-radius: 12px;
  position:relative;
  
}

.mainItemsTitle, .innerItem{
  cursor:pointer;
}

.mainItems {
  font-size: 22px;
}

.hidden {
  display: none;
}

.color {
  color: green;
}

.color2 {
  color: blue;
}

.active {
  background: red;
}

.active:after {
  display: inline-block;
  content
}

.innerItem:hover{
  background: #ddd;
}

.help1:before {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	/*border-width:  10px 5px 5px 5px;
  border-width:  10px 10px 5px 10px;*/
  /*border-width: 0px 5px 10px 5px;*/
	border-color: #000 transparent transparent transparent;
  border: 10px solid transparent;	border-bottom: 20px solid;
	position: absolute;
	margin: auto;
	right: 15px;
	top: 0;
	bottom: 0;
  }
  
  .help:before {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 5px 10px 5px;
	border-color: #000 transparent transparent transparent;
  transparent transparent;
  border: 10px solid transparent;	border-top: 20px solid;
	position: absolute;
	margin: auto;
	right: 5px;
	top: 0;
	bottom: 0;
  }

/*.mainItemsTitle span:after{
  display:inline-block;
  content:'+';
}
.expand:after{
  display:inline-block;
  content:'-';
}*/

JavaScript

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

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

var flag = true;

for (i = 0; i < mainItems.length; i++) {
  mainItems[i].addEventListener('click', function(event) {

	//почему-то внутри условия теряется "i" и приходиться создавать новую переборку
    for (i = 0; i < mainItems.length; i++) {
					//mainItems[i].classList.add('help');
      if (mainItems[i] !== event.target) {
				console.log('mainItems[i]', mainItems[i]);
        console.log('this[i]', this);
        
        mainItems[i].nextElementSibling.classList.add('hidden');
        mainItems[i].classList.remove('active');
        
				//event.target.classList.toggle('help');
       // event.target.classList.toggle('help1');
      };

    }

    event.target.nextElementSibling.classList.toggle('hidden');
    event.target.classList.toggle('active');

		 for (i = 0; i < event.target.children.length; i++) {//переделать на querySelector('span')
    	  if (event.target.children[i].innerHTML === '+') {
          flag = true;
          
      	};
       /* if (event.target.match('hidden')) {
       			event.target.children[i].innerHTML = "-"; 
            };*/
    };



    for (i = 0; i < expand.length; i++) {
      document.getElementsByClassName("expand")[i].innerHTML = "+";
      event.target.classList.add('help');
    };


    flag = !flag;

    //console.log(flag);

    for (i = 0; i < event.target.children.length; i++) {

      if (flag) {
        event.target.children[i].innerHTML = "+";
        event.target.classList.remove('help');
        event.target.classList.add('help1');
      } else {
        event.target.children[i].innerHTML = "-";
        event.target.classList.add('help');
        event.target.classList.remove('help1');
      }
    };

  });

};