FAQ Section with Toggle Effect Using HTML, CSS, and JavaScript Illustration

How to Create a FAQ Section with Toggle Effect Using HTML, CSS, and JavaScript

by

A FAQ (Frequently Asked Questions) section is a great way to answer common questions on your website. And when you add a toggle effect, it becomes even more interactive and user-friendly.

In this tutorial, you’ll learn how to create a simple FAQ section where answers can expand or collapse when clicked — using HTML, CSS, and a bit of JavaScript.

👁️ Preview

🧱 Step 1: Build the HTML Structure

Let’s start by creating a basic FAQ layout with questions and answers.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>FAQ Toggle</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <section class="faq">
    <h2>Frequently Asked Questions</h2>

    <div class="faq-item">
      <button class="faq-question">What is HTML?</button>
      <div class="faq-answer">
        <p>HTML stands for HyperText Markup Language. It's used to structure content on the web.</p>
      </div>
    </div>

    <div class="faq-item">
      <button class="faq-question">What is CSS?</button>
      <div class="faq-answer">
        <p>CSS is used to style HTML elements. It controls colors, layouts, fonts, and more.</p>
      </div>
    </div>

    <div class="faq-item">
      <button class="faq-question">What is JavaScript?</button>
      <div class="faq-answer">
        <p>JavaScript adds interactivity to web pages, like sliders, forms, and animations.</p>
      </div>
    </div>

  </section>

  <script src="script.js"></script>
</body>
</html>

✅ Why use buttons for questions?

Using <button> elements makes your FAQ more accessible — users can navigate with keyboard and screen readers.

🎨 Step 2: Style the FAQ with CSS

Now let’s add some basic styling to make it look clean and readable.

body {
  font-family: Arial, sans-serif;
  padding: 2rem;
  background-color: #f8f9fa;
}

.faq {
  max-width: 600px;
  margin: auto;
}

.faq-item {
  margin-bottom: 1rem;
  border-bottom: 1px solid #ccc;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  background-color: #fff;
}

.faq-answer {
  padding: 0 1rem 1rem;
  display: none;
  font-size: 1rem;
  color: #333;
}

.faq-question.active {
  color: #007bff;
}

⚙️ Step 3: Add the Toggle Functionality with JavaScript

Now let’s make the FAQ answers appear and hide when questions are clicked.

const questions = document.querySelectorAll(".faq-question");

questions.forEach((question) => {
  question.addEventListener("click", () => {
    // Toggle active class
    question.classList.toggle("active");

    // Get the next sibling, which is the answer
    const answer = question.nextElementSibling;

    // Toggle display
    if (answer.style.display === "block") {
      answer.style.display = "none";
    } else {
      answer.style.display = "block";
    }
  });
});

✅ What’s happening here:

  • We select all elements with the class .faq-question
  • On click, we toggle an “active” class and the display of the corresponding .faq-answer
  • This makes the answer show/hide when the question is clicked

✅ Final Result

You now have a fully functional FAQ section with a toggle effect, using:

  • Clean and semantic HTML
  • Simple and responsive CSS
  • Lightweight JavaScript logic

This component is great for product pages, help centers, portfolios, and more!

🧩 Extra Tips

  • Add smooth transitions with max-height and overflow: hidden for animation
  • Use ARIA attributes to improve accessibility even more
  • Add icons like + and – to show the toggle state visually

Leave a Comment