JSFiddle - React, Tailwind, and code Playground

by kpulkit29

HTML

<ul class="container">
  
</ul>

CSS

.container {
   height: auto;
   width: 100%;
}

.accor-element {
  margin-left: 10px;
}

.accor-element > .accor-element {
  background: green;
  display: none;
}

.visible > .accor-element {
  display: block;
}

JavaScript

/* a
 - --b
  --- c
       ----d */

let data = [{
    node: 'a',
    children: [{
      node: 'b'
    }, {
      node: 'c',
      children: [{
        node: 'd'
      }]
    }]
  },
  {
    node: 'e'
  },
   {
    node: 'f',
     children: [{
      node: 'g'
    }]
  }
]

let container = document.querySelector(".container");

function addAccordian(data, container) {
 		for(let item of data) {
    		let div = document.createElement('li');
        let div2 = document.createElement("div");
        div.classList.add("accor-element");
        div2.textContent = "sdsd"
        div.appendChild(div2)
        div.onclick = (event) => { 
        debugger;
        event.stopPropagation();
        		let element = event.currentTarget;
            let classAvailable = ([].slice.call(element.classList)).includes("visible");
            console.log(classAvailable);
            if(classAvailable) {
              	element.classList.remove("visible");
            } else {
              element.classList.add("visible");
            }
        }
        if(item.children && item.children.length) {
           addAccordian(item.children, div);
        }
        container.appendChild(div);
    }
}
addAccordian(data, container);