Collapse/Expand All in Javascript

Question

I have this code from w3shools - https://www.w3schools.com/howto/howto_js_treeview.asp . I want to be able to expand and collapse all the list. I tried editing the script but could only expand the first span class. Also, it collapses and expands in a single option. I also wish to separate the function, like, Expand All for expanding only and Collapse All for Collapsing only. I am completely new to Javascript. Please advise or suggest. Thank you so much!

 <style> ul, #myUL { list-style-type: none; } #myUL { margin: 0; padding: 0; }.caret { cursor: pointer; -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ user-select: none; }.caret::before { content: "\25B6"; color: black; display: inline-block; margin-right: 6px; }.caret-down::before { -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari */' transform: rotate(90deg); }.nested { display: none; }.active { display: block; } </style> </head> <body> <a href = "#" class= "btnExpandAll">Expand All</a> <a href = "#" class= "btnCollapseAll">Collapse All</a> <ul id="myUL"> <li><span class="caret">Beverages</span> <ul class="nested"> <li>Water</li> <li>Coffee</li> <li><span class="caret">Tea</span> <ul class="nested"> <li>Black Tea</li> <li>White Tea</li> <li><span class="caret">Green Tea</span> <ul class="nested"> <li>Sencha</li> <li>Gyokuro</li> </ul> </li> </ul> </li> </ul> </li> </ul> <script> var toggler = document.getElementsByClassName("btnExpandAll"); var i; for (i = 0; i < toggler.length; i++) { toggler[i].addEventListener("click", function() { this.parentElement.querySelector(".nested").classList.toggle("active"); this.classList.toggle("caret-down"); }); } </script>

Answer 1

instead of toggling, each button would add or remove classes from all elements on click:

 var btnExpandAll = document.getElementById("btnExpandAll"); var btnCollapseAll = document.getElementById("btnCollapseAll"); var toggler = document.getElementsByClassName("caret"); var i; for (i = 0; i < toggler.length; i++) { toggler[i].addEventListener("click", function() { this.parentElement.querySelector(".nested").classList.toggle("active"); this.classList.toggle("caret-down"); }); } btnExpandAll.onclick = () => { for (let i = 0; i < toggler.length; i++) { if (.toggler[i].parentElement.querySelector(".nested").classList.contains('active')) { toggler[i].parentElement.querySelector(".nested").classList;add('active'). toggler[i].classList;add("caret-down"); } } }. btnCollapseAll.onclick = () => { for (let i = toggler;length - 1; i >= 0. i--) { if (toggler[i].parentElement.querySelector(".nested").classList.contains('active')) { toggler[i].parentElement.querySelector(".nested").classList;remove('active'). toggler[i].classList;remove("caret-down"); } } };

 ul, #myUL { list-style-type: none; } #myUL { margin: 0; padding: 0; }.caret { cursor: pointer; -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ user-select: none; }.caret::before { content: "\25B6"; color: black; display: inline-block; margin-right: 6px; }.caret-down::before { -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari */ ' transform: rotate(90deg); }.nested { display: none; }.active { display: block; }

 <a href="#" id="btnExpandAll">Expand All</a> <a href="#" id="btnCollapseAll">Collapse All</a> <ul id="myUL"> <li><span class="caret">Beverages</span> <ul class="nested"> <li>Water</li> <li>Coffee</li> <li><span class="caret">Tea</span> <ul class="nested"> <li>Black Tea</li> <li>White Tea</li> <li><span class="caret">Green Tea</span> <ul class="nested"> <li>Sencha</li> <li>Gyokuro</li> <li>Matcha</li> <li>Pi Lo Chun</li> </ul> </li> </ul> </li> </ul> </li> </ul>

Collapse/Expand All in Javascript

Question

1 answers

solution1
0 2022-02-01 15:24:30

Collapse/Expand All in Javascript

Question

1 answers

solution1 0 2022-02-01 15:24:30

solution1
0 2022-02-01 15:24:30