How to Create an Interactive Accordion FAQ Section Using HTML, CSS, and JavaScript

by

A Frequently Asked Questions (FAQ) section is an essential part of any website, helping users find answers quickly without needing to contact support. An accordion-style FAQ section enhances user experience by displaying only the relevant answers when clicked, keeping the interface clean and organized.

In this blog post, we’ll build a simple Accordion FAQ Section using HTML, CSS, and JavaScript, where clicking on a question reveals or hides the corresponding answer.

✨ Features of Our FAQ Accordion

✔ Collapsible answers: Click a question to show or hide its answer.
✔ Sleek, minimalistic design: Clean layout with clear font styles.
✔ Smooth user experience: Keeps the page uncluttered by showing only the necessary information.
✔ Easy to customize and extend: You can easily add more questions and adjust styling.

📌 Step 1: Writing the HTML Structure

First, we create an HTML structure with three FAQ items. Each question is inside a <div class="question">, and its corresponding answer is inside a <div class="answer">.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Accordion FAQ Section</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      max-width: 600px;
      margin: auto;
      background: #f9f9f9;
    }
    .accordion-item {
      border-bottom: 1px solid #ccc;
      margin-bottom: 10px;
    }
    .question {
      background: #eee;
      padding: 15px;
      cursor: pointer;
      font-size: 18px;
    }
    .answer {
      padding: 15px;
      display: none;
      background: #fff;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>FAQ</h1>
  <div class="accordion-item">
    <div class="question">What is your return policy?</div>
    <div class="answer">Our return policy lasts 30 days. If 30 days have gone by since your purchase, unfortunately we can’t offer you a refund or exchange.</div>
  </div>
  <div class="accordion-item">
    <div class="question">How do I track my order?</div>
    <div class="answer">Once your order has shipped, you will receive an email with a tracking number and link to track your package.</div>
  </div>
  <div class="accordion-item">
    <div class="question">Can I purchase items again?</div>
    <div class="answer">Yes, you can purchase items multiple times as long as they are in stock.</div>
  </div>
</body>
</html>

🔍 Explanation:

  • Each FAQ item is wrapped in a <div class="accordion-item">.
  • The question is clickable, and its corresponding answer is hidden initially.
  • We will use JavaScript to toggle the answer’s visibility when a question is clicked.

📌 Step 2: Adding JavaScript for Interactivity

Now, let’s add JavaScript to toggle the answers when a question is clicked.

<script>
  document.querySelectorAll(".question").forEach(question => {
    question.addEventListener("click", function() {
      const answer = this.nextElementSibling;
      if (answer.style.display === "block") {
        answer.style.display = "none";
      } else {
        answer.style.display = "block";
      }
    });
  });
</script>

🔍 How It Works:

  1. We select all elements with the class "question".
  2. We add a click event listener to each question.
  3. When clicked, we check if the corresponding answer (next sibling) is visible:
    • If visible, hide it.
    • If hidden, show it.

📌 Step 3: Enhancing User Experience with CSS Transitions

To make the FAQ section look smoother, we can add a CSS transition effect.

.answer {
  padding: 15px;
  display: none;
  background: #fff;
  font-size: 16px;
  transition: max-height 0.3s ease-out;
  overflow: hidden;
}

With this, the answer gradually expands instead of appearing suddenly.

🎨 Step 4: Adding Icons for Better UX

To indicate whether a section is open or closed, we can add icons dynamically in JavaScript.

Updated JavaScript:

<script>
  document.querySelectorAll(".question").forEach(question => {
    question.addEventListener("click", function() {
      const answer = this.nextElementSibling;
      const isOpen = answer.style.display === "block";

      // Close all answers before opening a new one (optional)
      document.querySelectorAll(".answer").forEach(a => a.style.display = "none");
      
      // Toggle the current answer
      answer.style.display = isOpen ? "none" : "block";

      // Toggle active class for styling
      this.classList.toggle("active");
    });
  });
</script>

🛠 Additional Features to Consider:

✅ Expand only one FAQ item at a time
✅ Use CSS animations instead of JavaScript toggles
✅ Store FAQs dynamically using JavaScript arrays

🎉 Conclusion

We’ve successfully built an interactive Accordion FAQ Section using HTML, CSS, and JavaScript. This feature is useful for help sections, documentation, or product FAQs on websites.

🚀 Next Steps:

  • Try using CSS-only solutions for FAQ toggling.
  • Fetch FAQ data dynamically from a JSON file or API.
  • Add a search feature to filter FAQ questions.

Let us know in the comments how you would improve this Accordion FAQ! 💬