/**
 * div.js-show-hide
 *   div.js-show-hide-toggle
 *     toggle here
 *   div
 *     content here
 */

document.addEventListener('DOMContentLoaded', function() {

  var elements = Array.from(document.querySelectorAll('.js-show-hide__toggle')),
      toggles = [];

  function addEventHandler(el) {
    el.addEventListener('click', function elClickListener() {
      var toggle = toggles[el.dataset.index];
      toggle.collapsed = !toggle.collapsed;
      toggle.parent.classList.toggle('js-show-hide--collapsed', toggle.collapsed);
    });
  }

  elements.forEach(function(el, i) {
    el.dataset.index = i;
    var coll = el.parentElement.classList.contains('js-show-hide--collapsed');
    Array.from(el.parentElement.children).forEach(function(el) {
      if (!el.classList.contains('js-show-hide__toggle')) {
        el.classList.add('js-show-hide__target');
      }
    });
    toggles.push({index: i, collapsed: coll, parent: el.parentElement});
    addEventHandler(el);
  });
});