Accordion Open Button

TipTop 0
Viewed 20

An accordion that I'm editing on Codepen is running well. However, when clicking on more than one question, I want the previous answers to close when when the current answer opens. Any clues how I can do that?

Codepen here

Also, when using Font Awesome 4.7.0 the following unicodes show up properly.

(f055 & f056) Unicodes

However with switching to Font Awesome 5.14.5 the Unicodes are no longer working.

button javascript css
1 Answers

to close other, loop again all button inside onclick, for font, replace font-family: "FontAwesome"; with 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>

uingtea0
Related