interrupteur accordéon

Question

L'effet accordéon que j'ai édité sur Codepen a bien fonctionné. Cependant, lorsque je clique sur plusieurs questions, je souhaite que les réponses précédentes se ferment tandis que la réponse actuelle est ouverte. Y'a-t-il une quelconque façon de réussir cela?

Lien Codepen ici

Aussi, lors de l'utilisation de Font Awesome 4.7.0, l'Unicode suivant s'affiche normalement.

(f055 & f056) Unicodes

Mais après le passage à Font Awesome 5.14.5, Unicode ne fonctionne plus.

Answer 1

Désactivez les autres boutons pour les faire tous fonctionner à nouveauonclick内的按钮，对于字体，将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>