我有一个 accordion ，其中的面板是伪按钮，单击"按钮"时会展开 accordion 内容，单击另一个面板时会关闭当前打开的 accordion 面板。我遇到的问题是，如果单击面板一次打开 accordion ，再次单击面板关闭它，它保持焦点（橙色边框保持），我不知道如何将按钮恢复到我单击它之前的状态？同样的方式，当我单击另一个面板时，它会重置？

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {

    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      let active = document.querySelectorAll(".accordion-div .accordion.active");
      for (let j = 0; j < active.length; j++) {
        active[j].classList.remove("active");
        active[j].nextElementSibling.style.maxHeight = null;
      }
      this.classList.toggle("active");
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

.accordion {
  color: #fff;
  background-color: #00000042;
  cursor: pointer;
  padding: 10px 10px;
  margin-top: 20px;
  width: 100%;
  border: 1px solid #00000042;
  text-align: left;
  outline: none;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #00000042;
  border: 1px solid #fc8e2d;
}

.panel {
  padding: 0 18px;
  font-size: 18px;
  background-color: #00000042;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

<div class="accordion-div">
  <button class="accordion"><span class="faq__question-heading">Title1</span></button>
  <div class="panel">
    <p style="padding:18px 0;">description1</p>
  </div>

  <button class="accordion"><span class="faq__question-heading">Title2</span></button>
  <div class="panel">
    <p style="padding:18px 0;">description2</p>
  </div>

  <button class="accordion"><span class="faq__question-heading">Title3</span></button>
  <div class="panel">
    <p style="padding:18px 0;">description3</p>
  </div>
</div>

有人能帮助我如何更改代码吗？
我试着用这个来修改JavaScript

for (var j = 0; j < acc.length; j++) {
    acc[j].nextElementSibling.style.maxHeight = null;
}

但它会把整个JS搞砸，停止工作。