Javascript，Accordion不在safari中工作

Question

所以我有一个非常奇怪的任务来创建一个Pure Vanilla Javascript小部件来生成一个网页。

我有一个元素可供使用，但请记住，我不能使用任何jQuery或内联JS或外部CSS或创建我自己的<style></style>标记。

所以我的手风琴适用于Chrome和Firefox，但不适用于Safari。

这是js fidle的链接：https://jsfiddle.net/rhf1gp2g/1/。有人解释说可能在Safari中无法访问某些JS属性吗？

也没有在最新的IE中测试过，也许它也没有在那里工作。

//global variables, html containers
var parentElement, headingContainer, headingImgContainer, headerTextContainer, TopCont;

//html elements for header
var headerH2, headerP;

//html elements for Top container
var TopContH2, TopContP, TopContP2, TopContP3;

//Accordion elements
var accordion, accordionCss, accordionCssAfter, accordionCssActive;

//images
var headingImg;

var cssDown, cssUp;
// create main HTML markup for main element
parentElement = document.getElementById('mainContent');
parentElement.style.borderLeft = 'none';
parentElement.style.paddingRight = '20px';

// Create Accordion 
// #dd6580, #eaeaea
function createAccordion() {
  accordion = document.createElement('div');
  accordion.id = 'accordion';
  accordion.style.padding = '20px';
  accordionCss = "font-size: 16px; padding: 15px; background: #eaeaea;text-align: left; width: 100%; border: 0; transition: .2s";


  accordion.innerHTML = '<button class="accordion" style="font-size: 16px; padding: 15px; background: #eaeaea;text-align: left; width: 100%; border: 0; transition: .2s">Should I choose red or white wine for my wedding <span class="triangle" style="' + cssDown + '"></span></button>' +
    '<div class="panel" style="overflow: hidden; transition: 0.2s ease-in-out; max-height: 0; opacity: 0;">' +
    '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>' +
    '</div>' +
    '<button class="accordion" style="font-size: 16px; padding: 15px; background: #eaeaea;text-align: left; width: 100%; border: 0; transition: .2s">Should I choose red or white wine for my wedding<span class="triangle" style="' + cssDown + '"></span></button>' +
    '<div class="panel" style="overflow: hidden; transition: 0.2s ease-in-out; max-height: 0; opacity: 0;">' +
    '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>' +
    '</div>';

  parentElement.appendChild(accordion);

  var acc = document.getElementsByClassName("accordion");

  for (var i = 0; i < acc.length; i++) {

    acc[i].addEventListener("click", function() {
      if (this.nextSibling.style.opacity === "0") {
        this.style.background = "#dd6580";
        this.style.color = "#ffffff";
        this.nextSibling.style = "opacity: 1; transition: 0.2s ;max-height: 500px; padding-bottom: 20px; padding-top: 20px;";
        this.getElementsByTagName('span')[0].style = cssUp;
      } else {
        this.style.color = "#000000";
        this.nextSibling.style = cssPanelHide;
        this.getElementsByTagName('span')[0].style = cssDown;
        this.style.background = "#eaeaea";
      }
    });
  }
}
cssDown = "width: height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #bababa;  position: absolute; right: 50px; margin-top: 5px;";
cssUp = "width: 0px; height: 0px;  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #ffffff; position: absolute; right: 50px;";
cssPanelHide = "overflow: hidden; transition: 0.2s ease-in-out; max-height: 0; opacity: 0;";
cssPanelShow = "opacity: 1; transition: 0.2s ;max-height: 500px; padding-bottom: 20px; padding-top: 20px;";


createAccordion();

#mainContent {
  width: 691px;
  float: left;
  border-top: 1px solid #000;
  border-left: 20px solid #000;
  position: relative;
}

<div id="mainContent"></div>