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; }

 
 
FAQ Accordion
 When Is It? 
 
 On The Date That We Select. 
 On The Date That We Select. 
 
 Why Is It. 
 
 Because We Chose To. 
 
 Where Is It 
 
 At The Place That We Select.