我试图创建一个带有Show All/Hide All附加选项的JS可折叠。 我的代码似乎在所有浏览器中都能正常工作，除了IE中的全部显示/全部隐藏按钮。 我试过各种方法（虽然我是JS的新手），但在IE中没有一个能起到作用。 谁能帮帮忙吗？ 解决方案需要结合JS，HTML，CSS，因为这些是唯一的我可以添加在我们的界面。

null

  var coll = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    var content = this.nextElementSibling;
    if (content.style.display === "table-row") {
      content.style.display = "none";
      this.firstElementChild.firstChild.style.transform = "rotate(-45deg)";
    } else {
      content.style.display = "table-row";
      this.firstElementChild.firstChild.style.transform = "rotate(45deg)";
    }
  });
} 

  function showexplanation() {
    document.querySelectorAll('.accordion-content').forEach(item => {
      item.style.display = "table-row";
    })
    document.querySelectorAll('.arrow-right').forEach(item => {
      item.style.transform = "rotate(45deg)";
    })
  }

function hideAll() {
  document.querySelectorAll('.accordion-content').forEach(item => {
    item.style.display = "none";
  })
  document.querySelectorAll('.arrow-right').forEach(item => {
    item.style.transform = "rotate(-45deg)";
  })
} 

.accordion {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.accordion td {
  padding: 15px;
}

.accordion td:nth-child(1) {
  min-width: 40px;
  text-align: center;
}

.accordion td:nth-child(2) {
  padding-left: 0px;
}

.accordion-content {
  padding: 25px;
  overflow: hidden;
  background-color: #f1f1f1;
  display: none;
}

.accordion-content td {
  padding: 15px;
}

.arrow-right {
  border: solid white;
  border-width: 0 1.5px 1.5px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  transition: all 200ms ease 0s;
}

<table style="max-width: 700px;" border="0" cellspacing="0">
  <tbody>
    <tr class="accordion">
      <td style="width: 1%"><i class="arrow-right"></i></td>
      <td>Item 1</td>
      <td style="text-align: right;">£1,800</td>
    </tr>
    <tr class="accordion-content">
      <td colspan="3">
        <p>Explanation 1</p>
      </td>
    </tr>

    <tr class="accordion">
      <td style="width: 1%"><i class="arrow-right"></i></td>
      <td>Item 3</td>
      <td style="text-align: right;">£1,750</td>
    </tr>
    <tr class="accordion-content">
      <td colspan="3">
        <p>Explanation 3</p>
      </td>
    </tr>
    <tr class="accordion">
      <td style="width: 1%"><i class="arrow-right"></i></td>
      <td>Item 3</td>
      <td style="text-align: right;">£1,750</td>
    </tr>
    <tr class="accordion-content">
      <td colspan="3">
        <p>Explanation 3</p>
      </td>
    </tr>
  </tbody>
</table>
<p style="margin-top: 20px;">
  <button onclick="showexplanation()">Show all</button>
</p>
<p style="margin-top: 20px;" id="solution">
  <button onclick="hideAll()">Hide all</button>
</p>

null