Почему не работает крипт для сворачивания переходов?

Question

[TravaUDoma]

Всем доброго.
Пытаюсь сделать сворачивание списка.

<li id="crossing" role="treeitem">
  <ul id="control" role="group" class="tree-folder">Развернуть/Свернуть</li>
    <li><a href="#">Название 1</a></li>
    <li><a href="#">Название 2</a></li>
    <li><a href="#">Название 3</a></li>
    <li><a href="#">Название 4</a></li>
    <li><a href="#">Название 5</a></li>
    <li><a href="#">Название 6</a></li>
    <li><a href="#">Название 7</a></li>
    <li><a href="#">Название 8</a></li>
  </ul>
</div>
<style>
#crossing ul li {
  display:none;
}
#crossing.expand ul li {
  display:list-item;
}
#crossing ul#control {
  display:list-item;
  margin-top: 15px;
  cursor:pointer;
}
</style>
<script>
document.querySelectorAll('[role="group"]').onclick = function(){
  document.querySelectorAll('[role="treeitem"]').classList.toggle("expand");
}
</script>

не могу понять почему не работает

если использовать getElementById то почему то все работает

document.getElementById('control').onclick = function(){
  document.getElementById('crossing').classList.toggle("expand");
}

но ID не могу использовать нужно сделать через role
подскажите как правильно сделать?

Answer 1

[Daskus]

Вы пытаетесь навесить слушатель на коллекцию (на массив элементов). Нужно на каждый по отдельности, если используете querySelectorAll.

let els = document.querySelectorAll('[role="group"]');
for(let i = 0; i < els.length; i++){
  els[i].onclick = function(){
    document.querySelector('[role="treeitem"]').classList.toggle("expand");
  }
}