JavaScriptでクリックされた要素を連動させる方法についてご紹介します。

やりたかったこと

複数ある同じclass要素のどれかをクリックしたとき、対応する順番の特定の要素を操作したいな～と思っていました。言葉で表現するとなんだか難しいですが、要するに以下のようなことです。

hoge1について

hoge2について

hoge3について

ときどき見かけると思います。クリックすると詳細が表示される、みたいなやつです。

これをいざ自分でも作りたいと思ったとき、なかなか求めている情報が見つからず苦戦したので、今回こういう形で記事にしてみました。

コードと解説

まず、上の例で使用しているHTMLコードはこちら。

<p class="info">hoge1について</p>
<div class="open-button">
  <i class="fas fa-plus-circle"></i> 詳細を確認
</div>
<div class="hidden-content" style="display: none;">
  hoge1とは、hoge1である。
</div>
<p class="info">hoge2について</p>
<div class="open-button">
  <i class="fas fa-plus-circle"></i> 詳細を確認
</div>
<div class="hidden-content" style="display: none;">
  hoge2とは、hoge2である。
</div>
<p class="info">hoge3について</p>
<div class="open-button">
  <i class="fas fa-plus-circle"></i> 詳細を確認
</div>
<div class="hidden-content" style="display: none;">
  hoge3とは、hoge3である。
</div>

見ての通り、classはどれも同じ名前を使っています。名前をそれぞれ変えて対応させれば早いですが、数が増えると面倒なので諦めました。

そこで、工夫した結果のJavaScriptがこちらです。

<script type="text/javascript">
  let elms = document.querySelectorAll('.open-button');
  let index;
  elms.forEach((elm) => {
    elm.addEventListener('click', () => {
      index = [].slice.call(elms).indexOf(elm);
      let hc = document.getElementsByClassName('hidden-content')[index];
      let style = hc.currentStyle || document.defaultView.getComputedStyle(hc, '');
      if (style.display == 'none') {
        hc.style.display = 'block';
      } else {
        hc.style.display = 'none';
      }
    });
  });
</script>

コードの内容を順に説明していきます。

まず、querySelectorAllでクラス名"open-button"の要素を全て取得し、配列elmsに格納します。

続いてforEachで配列elmsの全ての要素に対して繰り返し処理を行いますが、このときにaddEventListenerでイベントに対する操作を行います。addEventListenerは特定のイベントが発生したときに操作を行うメソッドで、今回はイベントとして"click"を設定しています。

クリックされた場合はindexOfメソッドでその要素が何番目かを取得後、indexに格納し

let hc = document.getElementsByClassName('hidden-content')[index];

により、クリックされた"open-button"に対応する"hidden-content"を取得します。

後はこの"hidden-content"のstyleの状態を

let style = hc.currentStyle || document.defaultView.getComputedStyle(hc, '');

によって取得し、表示/非表示を切り替えるようにします。

ここではdisplayの値を取得するため、読み取り専用のgetComputedStyleメソッドを使用しています。currentStyleはIEの独自規格で、getComputedStyleが使えない場合に備えた記述です。

以上の処理で、詳細ボタンとその中身が連動するようになりました。

最後に

toggleを使って切り替える方法なども考えましたが、結局addEventListenerとstyleの取得の組み合わせで良い感じに機能を実現できました。

onclickで個別に設定したりする必要もないので、お手軽な実装としておすすめです。