JSFiddle - React, Tailwind, and code Playground

by harifrais

HTML

<div class="tab-div" id="navList">
  <div class="tab">Div1
  <div class="test">
    test1
  </div>
   <div class="test">
    test1.1
  </div>
  </div>
  <hr/>
  <div class="tab" >Div2
  <div class="test">
    test2
  </div>
   <div class="test">
    test2.2
  </div></div>
  <hr/>
  <div class="tab">Div3
  <div class="test">
    test3
  </div>
   <div class="test">
    test3.3
  </div></div>
</div>

CSS

.active{
 color: green;
}

JavaScript

var elements = document.querySelectorAll('.tab');
for (var i = 0; i < elements.length; i++) {
    elements[i].classList.remove('active');
    elements[i].onclick = function (event) {
        //remove all active class
        removeClass();
        if (event.target.innerHTML === this.innerHTML) {
            this.classList.add("active");
        }
    }
}

var nestedelements = document.querySelectorAll('.tab-div .tab .test');
for (var i = 0; i < nestedelements.length; i++) {
    nestedelements[i].classList.remove('active');
    nestedelements[i].onclick = function (event) {
        //remove all active class
        removeClass();
        if (event.target.innerHTML === this.innerHTML) {
            this.classList.add("active");
        }
    }
}



function removeClass(){
  for (var i = 0; i < elements.length; i++) {
    elements[i].classList.remove('active');
  }
}