HTML CSS JS

SIMPLE COLLAPSIBLE LIST WITH HTML CSS JS

NESTED HTML LIST

01

<ul class="demo">   <li>     TITLE      <ul> <li>ITEM</li> <li>ITEM</li> </ul>   </li> </ul>

JS TOGGLE BUTTONS

02

for (let i of document.querySelectorAll (".demo ul, .demo ol")) {   CREATE <DIV> TOGGLE BUTTON   let tog = document.createElement("div");   tog.innerHTML =      i.previousSibling.textContent;   tog.className = "tog";   tog.onclick = () =>      { tog.classList.toggle("show") };

  REPLACE "TITLE" WITH <DIV> TOGGLE      i.parentElement.removeChild     (i.previousSibling);   i.parentElement.insertBefore(tog, i);  }

CSS SHOW & HIDE

03

CONTAINER .demo, .demo ul, .demo ol   { list-style-type: none; }

TOGGLE BUTTON .tog::before { content: "+"; } .tog.show::before { content: "-"; }

SHOW/HIDE .demo ul, .demo ol { display: none; } .tog.show + ul, .tog.show + ol   { display: block; }