[JavaScript] 折り畳みを実装する方法

Q&Aの表のように「質問部分をクリックすると答えを表示する」ような実装をする。

方法

サンプル

Question
This is Answer.

Question

This is Answer.

Question

This is Answer.

<div class="collapse">
  <div class="collapse_head">Question</div>
  <div class="collapse_body">
    <p>This is Answer.</p>
  </div>
</div>
<div class="collapse">
  <div class="collapse_head">Question</div>
  <div class="collapse_body">
    <p>This is Answer.</p>
  </div>
</div>
<div class="collapse">
  <div class="collapse_head">Question</div>
  <div class="collapse_body">
    <p>This is Answer.</p>
  </div>
</div>

CSS

大切な部分だけ抜粋

.collapse_head {
  cursor: pointer;
}
.collapse_body {
  display: none;
}
.show {
  display: block !important;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  var collapse_head = document.getElementsByClassName('collapse_head');
  [].forEach.call(collapse_head, function(el) {
    el.addEventListener('click', function() {
      this.nextElementSibling.classList.toggle('show');
    });
  });
}, false);