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

Q&A のように答えをクリックすると答えを表示するような実装

#仕様

この手の実装は jQuery が多い。
そろそろ jQuery を脱却したいので JavaScript だけで実装する。

#方法

#サンプル

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

(function (w, d) {
    d.addEventListener('DOMContentLoaded', collapse_element(), false);

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