HTML CSS JS

SIMPLE COLLAPSIBLE LIST

(a real quick guide)

NESTED HTML LIST

01

<ul class="demo">   <li>     TITLE      <ul> <li>A</li> <li>B</li> </ul>   </li> </ul>

JS TOGGLE BUTTONS

02

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);  }

CSS SHOW & HIDE

03

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; }