suis akordion

Question

Kesan akordion yang saya sunting pada Codepen berfungsi dengan baik. Walau bagaimanapun, apabila mengklik pada berbilang soalan, saya mahu jawapan sebelumnya ditutup sementara jawapan semasa dibuka. Adakah terdapat cara untuk mencapai ini?

Pautan Codepen di sini

Juga, apabila menggunakan Font Awesome 4.7.0, Unicode berikut dipaparkan seperti biasa.

(f055 & f056) Unicodes

Tetapi selepas bertukar kepada Font Awesome 5.14.5, Unicode tidak lagi berfungsi.

Answer 1

Matikan butang lain untuk mengitar semuanya semulaonclick内的按钮，对于字体，将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>