In/Uitklapbar

var upIcon = '' +
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 6" class="icon">' +
  '<polygon fill="currentColor" points="8,3.9 5.5,1.8 4.6,1.1 3.5,2.4 7.8,5.9 8,6.1 8,6.1 8,6.1 8.2,5.9 12.5,2.4 11.4,1.1 10.5,1.8"/>' +
  '</svg>';

var downIcon = '' +
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 6" class="icon">' +
  '<polygon fill="currentColor" points="8,3.2 10.5,5.3 11.4,6 12.5,4.7 8.2,1.2 8,1 8,1 8,1 7.8,1.2 3.5,4.7 4.6,6 5.5,5.3"/>' +
  '</svg>';

/**
 * Initialize component.
 *
 * @param {HTMLElement} element Containing element.
 */
export default function Collapse (element) {
  var component = {
    // The highest level container element for this component.
    componentElement: element,

    // Target element.
    targetElement: null,

    // Original content of component element.
    originalContent: '',

    // Replace original content with toggling texts.
    toggleText: false,

    // Texts
    texts: {
      collapsed: 'Toon minder',
      expanded: 'Toon meer',
    },

    // Initial collapsed state
    collapsed: false,

    renderNewState: renderNewState,
  };

  // Retrieve original button content so we can put it back in the correct container.
  component.originalContent = component.componentElement.innerHTML;

  // Find target element.
  var targetId = component.componentElement.dataset.target;
  if (targetId) {
    component.targetElement = document.getElementById(targetId);
  }

  // Set texts
  var texts = component.componentElement.dataset.toggleTexts;
  if (texts != '') {
    texts = texts.split('|');
    component.texts.collapsed = texts[1];
    component.texts.expanded = texts[0];

    component.toggleText = true;
  }

  // Set accessibility attributes.
  component.componentElement.setAttribute('aria-controls', targetId);

  // Set event handler for on click event.
  component.componentElement.addEventListener('click', handleToggle(component));

  // Initially render component.
  component.renderNewState(component.collapsed);
}

/**
 * Set collapsed state.
 *
 * @param {boolean} collapsed The new collapsed state.
 */
function renderNewState (collapsed) {
  var icon = null;
  var text = this.originalContent;

  this.collapsed = collapsed;

  if (collapsed) {
    icon = downIcon;
    this.targetElement.classList.remove('collapse__hide');
    this.componentElement.setAttribute('aria-expanded', true);

    if (this.toggleText) {
      text = this.texts.collapsed;
    }
  } else {
    icon = upIcon;
    this.targetElement.classList.add('collapse__hide');
    this.componentElement.setAttribute('aria-expanded', false);

    if (this.toggleText) {
      text = this.texts.expanded;
    }
  }

  // Render container with new content.
  this.componentElement.innerHTML = text + icon;
}

/**
 * Handle toggle button.
 *
 * @param {HTMLElement} component Component container element.
 * @returns {EventListener}
 */
function handleToggle (component) {
  return function () {
    if (component.collapsed) {
      component.renderNewState(false);
    } else {
      component.renderNewState(true);
    }
  };
}