HTML CSS JS
(a real quick guide)
<ul class="demo"> <li> TITLE <ul> <li>A</li> <li>B</li> </ul> </li> </ul>
GET ALL NESTED ITEMS let all = document.querySelectorAll (".demo ul");
CREATE TOGGLE BUTTONS for (let i of all)) { let tog = document.createElement("div"); tog.innerHTML = i.previousSibling .textContent; tog.className = "tog"; tog.onclick = () => tog.classList.toggle("show"); i.parentElement.removeChild (i.previousSibling); i.parentElement.insertBefore(tog, i); }
CONTAINER .demo, .demo ul { list-style-type: none; }
TOGGLE BUTTON .tog::before { content: "+"; } .tog.show::before { content: "-"; }
SHOW/HIDE .demo ul { display: none; } .tog.show + ul { display: block; }