Optimized Accordion FAQ HTML, CSS, and JS Code Snippets for Easy Integration into Your Website

Example

Frequently Asked Questions

Code

<h2 >Frequently Asked Questions</h2>  
<div class="faqcontainer"> <div class="faqquestion">
     Quistion 1. do you need any support for web development?
    </div><div class="faqanswercont">  <div class="faqanswer">
        Answer 1. Are you interesteed on this code?
 </div></div></div>

<div class="faqcontainer"> <div class="faqquestion">
     Quistion 2. Are you interesteed on this code?
    </div><div class="faqanswercont">  <div class="faqanswer">
        Answer 2. Are you interesteed on this code?
 </div></div></div>


<script>
let faqquestion = document.querySelectorAll(".faqquestion");

faqquestion.forEach(faqquestion => {
  faqquestion.addEventListener("click", event => {
    const active = document.querySelector(".faqquestion.active");
    if(active && active !== faqquestion ) {
      active.classList.toggle("active");
      active.nextElementSibling.style.maxHeight = 0;
    }
    faqquestion.classList.toggle("active");
    const faqanswer = faqquestion.nextElementSibling;
    if(faqquestion.classList.contains("active")){
      faqanswer.style.maxHeight = faqanswer.scrollHeight + "px";
    } else {
      faqanswer.style.maxHeight = 0;
    }
  })
})

</script>
<style>
.faqcontainer {
  background-color: white;
  color: black;
  border-radius: 20px;
  box-shadow: 0 5px 10px 0 rgb(0,0,0,0.25);
  margin: 20px 0;
}
.faqquestion {
  font-size: 1.2rem;
  font-weight: 600;
  padding: 20px 80px 20px 20px;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.faqquestion::after {
  content: "\002B";
  font-size: 2.2rem;
  position: absolute;
  right: 20px;
  transition: 0.2s;
}
.faqquestion.active::after {
  transform: rotate(45deg);
}
.faqanswercont {
  max-height: 0;
  overflow: hidden;
  transition: 0.3s;
}
.faqanswer {
  padding: 0 20px 20px;
  line-height: 1.5rem;
}
</style>

Find easy-to-use accordion FAQ code snippets in HTML, CSS, and JS for simple integration into your website. These optimized designs enhance user experience and help you manage frequently asked questions effortlessly. Ideal for developers and designers looking to improve site navigation and streamline their FAQs.