let collapsibleEffect = function() {
  let collapsibleContainers = document.querySelectorAll('.collapsible-container');
  collapsibleContainers.forEach(function (collapsibleContainer) {
    let collapsibleTitle = collapsibleContainer.querySelector('.collapsible-title'),
        collapsibleIcon = collapsibleContainer.querySelector('#collapsible-icon'),
        collapsibleContent = collapsibleContainer.querySelector('.collapsible-content');

    if (collapsibleContainer.classList.contains('collapsible-disabled')) {
      collapsibleIcon.classList.remove( 'ds-icon-arrow-down' );
    }
    else {
      collapsibleTitle.addEventListener('click', function () {
        if (collapsibleContent != null) {
          if (collapsibleContent.classList.contains('ds-hide')) {
            collapsibleContent.classList.remove('ds-hide');
            collapsibleIcon.classList.remove('ds-icon-arrow-down');
            collapsibleIcon.classList.add('ds-icon-arrow-up');
          }
          else {
            collapsibleContent.classList.add('ds-hide');
            collapsibleIcon.classList.remove('ds-icon-arrow-up');
            collapsibleIcon.classList.add('ds-icon-arrow-down');
          }
        }
      });
    }
  })
}

module.exports = collapsibleEffect;
