手风琴打开按钮

Question

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.

Answer 1

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>