手风琴打开按钮

Question

我在Codepen上编辑的手风琴运行良好。但是，当单击多个问题时，我希望在当前答案打开时关闭以前的答案。有线索告诉我该怎么做吗？

代码笔在此

同样 ，当使用Font Awesome 4.7.0时，以下unicode会正确显示。

(f055 & f056) Unicodes

然而，随着切换到字体真棒5.14.5，Unicodes不再工作。

Answer 1

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

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>