Accordeon

var upIcon =
  '<svg version="1.1" focusable="false"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" class="icon">\n' +
  "  <g>\n" +
  '    <polygon fill="currentColor" points="1.1,12.6 8,5.7 14.9,12.6 16,11.4 9.1,4.6 8,3.4 6.9,4.6 0,11.4"/>\n' +
  "  </g>\n" +
  "</svg>";

var downIcon =
  '<svg version="1.1 focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" class="icon">\n' +
  "  <g>\n" +
  '    <polygon fill="currentColor" points="14.9,3.4 8,10.3 1.1,3.4 0,4.6 6.9,11.4 8,12.6 9.1,11.4 16,4.6"/>\n' +
  "  </g>\n" +
  "</svg>";

/**
 * Component
 *
 * @param {Element} element
 */
export default function Accordeon(element) {
  /* eslint-disable */

  var itemElementList = element.getElementsByClassName("accordeon__item");

  var accordeonItemList = [];
  for (var i = 0; i < itemElementList.length; i++) {
    var accordeonElement = itemElementList[i];

    // Set values for item.
    var accordeonItem = {
      itemElement: accordeonElement,
      itemContainerElement: accordeonElement.querySelector(
        ".accordeon__item-container"
      ),
      buttonElement: accordeonElement.querySelector(
        ".accordeon__item-header button"
      ),
      iconElement: accordeonElement.querySelector(".accordeon__item-icon"),
      bodyElement: accordeonElement.querySelector(".accordeon__item-body"),
      expanded: false
    };

    // Check if initially is expanded and set accordingly.
    if (accordeonItem.buttonElement.getAttribute("aria-expanded") === "true") {
      accordeonItem.expanded = true;
    }

    accordeonItem.buttonElement.addEventListener(
      "click",
      toggle(accordeonItem)
    );

    window.onload = setMaxHeight(accordeonItem);
    accordeonItemList[i] = accordeonItem;
  }

  var triggers = Array.prototype.slice.call(
    document.getElementsByClassName("trigger")
  );
  var inputs = document.getElementsByClassName("accordeon__item");
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener("keydown", function(event) {
      var target = event.target;
      var key = event.which.toString();
      // Is this coming from an accordion header?
      if (target.classList.contains("trigger")) {
        // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
        // 38 = Up, 40 = Down
        if (key.match(/38|40/)) {
          var index = triggers.indexOf(target);
          var direction = key.match(/34|40/) ? 1 : -1;
          var length = triggers.length;
          var newIndex = (index + length + direction) % length;

          triggers[newIndex].focus();

          event.preventDefault();
        } else if (key.match(/35|36/)) {
          // 35 = End, 36 = Home keyboard operations
          switch (key) {
            // Go to first accordion
            case "36":
              triggers[0].focus();
              break;
            // Go to last accordion
            case "35":
              triggers[triggers.length - 1].focus();
              break;
          }
          event.preventDefault();
        }
      }
    });
  }
}

function getTransitionEndEventName() {
  var transitions = {
      "transition"      : "transitionend",
      "OTransition"     : "oTransitionEnd",
      "MozTransition"   : "transitionend",
      "WebkitTransition": "webkitTransitionEnd"
   }
  let bodyStyle = document.body.style;
  for(let transition in transitions) {
      if(bodyStyle[transition] != undefined) {
          return transitions[transition];
      }
  }
}

function toggle(item) {
  return function() {
    item.expanded = !item.expanded;
    item.buttonElement.setAttribute("aria-expanded", item.expanded);
    var transitionEndEventName = getTransitionEndEventName();
    var panel = item.bodyElement;
    panel.style.transition = "max-height 0.2s ease-out";
    if (panel.style.maxHeight) {
      panel.style.maxHeight = panel.scrollHeight + "px";
      panel.style.maxHeight = null;
      var toggle = true;
      //change maxheight to make room for resize
      panel.addEventListener(transitionEndEventName, function(){
        if (toggle) {
          item.iconElement.innerHTML = item.expanded ? upIcon : downIcon;
          item.itemElement.classList.remove("accordeon__item--show");
          item.buttonElement.classList.remove("area-expanded");
          panel.style.display = 'none';
          toggle = false;
        }
      });
    } else {
      item.iconElement.innerHTML = item.expanded ? upIcon : downIcon;
      item.itemElement.classList.add("accordeon__item--show");
      item.buttonElement.classList.add("area-expanded");
      panel.style.display = 'block';
      panel.style.maxHeight = panel.scrollHeight + "px";
      var toggle = true;
      //change maxheight to make room for resize
      panel.addEventListener(transitionEndEventName, function(){
        if (toggle) {
          panel.style.maxHeight = panel.scrollHeight * 4 + "px";
          toggle = false;
        }
      });
    }
  };
}

  function setMaxHeight(item) {
      var body = item.bodyElement;
      if(body.classList.contains("open")) {
        body.style.maxHeight = body.scrollHeight + "px";
      }
  }