手风琴开关

Question

我在Codepen上编辑的手风琴效果运行良好。然而，当点击多个问题时，我希望之前的答案在当前答案打开时关闭。有什么方法可以实现吗？

Codepen链接在这里

另外，当使用Font Awesome 4.7.0时，以下Unicode显示正常。

(f055 & f056) Unicodes

但是切换到Font Awesome 5.14.5后，Unicode不再起作用。

Answer 1

关闭其他按钮，再次循环所有onclick内的按钮，对于字体，将font-family: "FontAwesome";替换为font-family: "Font Awesome\ 5 Free";

const accordionBtns = document.querySelectorAll(".accordion");

accordionBtns.forEach((accordion) => {
  accordion.onclick = function() {
    this.classList.toggle("is-open");
    let content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      // add this line
      accordionBtns.forEach(acc => acc.nextElementSibling.style.maxHeight = null)
      content.style.maxHeight = content.scrollHeight + "px";
    }
  };
});

.faq-container {
  width: 80%;
  max-width: 600px;
  margin: 50px auto;
}

button.accordion {
  width: 100%;
  background: #C0C0C0;
  border: none;
  outline: none;
  text-align: left;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: bold;
  color: #4169E1;
  cursor: pointer;
  transition: background-color 2.2s linear;
}

button.accordion:after {
  content: "\f055";
  font-family: "Font Awesome\ 5 Free";
  font-size: 18px;
  float: right;
}

button.accordion.is-open:after {
  content: "\f056";
}

button.accordion:hover,
button.accordion.is-open {
  color: #FFF;
  background: #4169E1;
  /*border-left: 2px solid #C0C0C0;
  border-right: 2px solid #C0C0C0;
  border-top: 2px solid #C0C0C0;
  border-bottom: 2px solid #C0C0C0;*/
}

.accordion-content {
  font-family: Arial;
  font-weight: bold;
  color: #663399;
  background: #FFF;
  border-left: 2px solid #C0C0C0;
  border-right: 2px solid #C0C0C0;
  border-bottom: 2px solid #C0C0C0;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">

<div class="faq-container">

  <h1 style="text-align: center; font-family: Arial; color: #663399">FAQ Accordion</h1>

  <button class="accordion">When Is It?</button>
  <div class="accordion-content">
    <p>
      On The Date That We Select.
      <br> On The Date That We Select.
    </p>
  </div>

  <button class="accordion">Why Is It.</button>
  <div class="accordion-content">
    <p>
      Because We Chose To.
    </p>
  </div>

  <button class="accordion">Where Is It</button>
  <div class="accordion-content">
    <p>
      At The Place That We Select.
    </p>
  </div>
</div>