javascriptで特定のclassをもつ要素すべてに個別のclickイベントを追加したい

Question

自動連携なCollapseがほしい

プレーンjavascriptで可変表示できる要素を作成しようと思い、w3schoolsのHow TO - Collapseを手本に試行錯誤中です。
今までは対象idのdisplayを操作する関数を定義してonclick="func(id)"で呼び出すというようなことをしていましたが、手作業で一つ一つidを書くのはあまり好ましくないと思ったため、今回のようにボタンと操作先が自動で連携されるようにしようとしています。
目標は操作元・操作先のn番目の要素がidなどを用いずに（htmlのコード量を抑えて）連携されることです。

該当のソースコード

<article>
  <p><a class="hidden3">aaaa</a></p>
  <div class="hidden3in">いぇい</div>
  <p><a class="hidden3">aaaa</a></p>
  <div class="hidden3in">いぇい</div>
  <p><a class="hidden3">aaaa</a></p>
  <div class="hidden3in">いぇい</div>
</article>

document.addEventListener('DOMContentLoaded', function() {
  var colla = document.getElementsByClassName("hidden3");
  var collb = document.getElementsByClassName("hidden3in");
  for (var i=0; i<collb.length; i++) {
    collb[i].style.display = "none";
    colla[i].addEventListener('click', function(){
      collb[i].style.display = (collb[i].style.display=='block')?'none':'block';
    });
  };
});

補足

要素がちゃんと非表示になっているためcollb[i].style.display = "none";までは機能しているようですが、肝心のclickイベントの追加でコケている感じです。
w3schoolsのほうではthis.nextElementSiblingを使っていますが、私の用途では操作対象の要素が直後に来ない場合が多々あり、それ故に今までidで操作先を明記せざるを得ませんでした。
.aクラスの3番目の要素で.bクラスの4番目の要素を操作するようなことはありません。ひとつの<p></p>にそれぞれが１つずつ入る感じですのでfor文で書きました。

当方js初心者ですので何卒よろしくおねがいします。

Answer 1

// for (var i=0; i<collb.length; i++) {
// ↓
   for (let i=0; i<collb.length; i++) {

【【JavaScript入門】letとvarの使い方とスコープの違い | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト】
https://www.sejuku.net/blog/58429

Comments

[Seiichi4421]

letに書き換えたところうまくいきました。
スコープをもう一度勉強しなおしたいと思います。

ご回答ありがとうございますm(_ _)m