Accordion / FAQ Section | HTML, CSS & JavaScript

Accordion / FAQ with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #06

Project Overview

The Accordion FAQ Section is a simple beginner-friendly project built using HTML, CSS, and JavaScript. It displays a list of frequently asked questions (FAQ) where users can click on a question to show or hide its answer. This helps organize large amounts of information in a clean and space-saving layout.

This project demonstrates how interactive sections can be created using JavaScript. When a user clicks an FAQ question, the related answer expands or collapses. The selected question can also receive a different visual style, making it easier to understand which answer is currently open.

This project is useful for beginners who want to practice DOM manipulation, click events, CSS transitions, classes, and interactive user interface development.

Key Features

Expandable FAQ: Users can click on the question to reveal the answer. Clicking the question a second time can hide the answer for a cleaner look.
Collapsible answers: The answers to the questions are hidden until the user clicks on the question. This helps to keep the interface clean and saves space, especially if there are multiple questions and answers on the page.
Click-based interaction: JavaScript code can listen for click events on the FAQ questions and then reveal or hide the corresponding answer.
Active FAQ state: The active FAQ item can have an active class so that CSS can style it to indicate which question is open.
Open and close icons: An icon, such as a plus or minus, can change when the FAQ item is opened or closed to show the user what the current state is.
Smooth expand and collapse: CSS transitions can animate the expanding and collapsing of the FAQ answers to provide a smooth user experience.
Multiple FAQ questions: The component can contain multiple questions, making it suitable for displaying common questions about products, services, websites, or other topics.
Clean and organized: The accordion keeps related questions and answers together while also keeping the page from getting too long or cluttered.
Responsive design: FAQ section can adjust to different screen sizes, making it comfortable to use on desktops, tablets, and mobile devices.
Reusable component: It can be reused in different projects and pages, such as help pages, product pages, documentation, and educational websites.

What You'll Learn

Understand how an accordion component works.
Learn how to handle click events using JavaScript.
Practice selecting multiple HTML elements with JavaScript.
Understand how to show and hide content dynamically.
Learn how to add and remove CSS classes.
Practice using classList.toggle() for interactive elements.
Understand how JavaScript connects a question with its answer.
Learn how CSS transitions can create smooth animations.
Practice updating icons based on an element’s state.
Understand how to organize repeated content using HTML.

HTML Code

HTML creates the structure of the Accordion FAQ Section. First, the style.css file is linked inside <head> section so CSS can control the appearance and layout of the FAQ section, the main content is placed inside the main FAQ container, which holds the heading and all the individual FAQ items, each FAQ item contains a question section that users can click to interact with the accordion.

Below the question, an answer section contains the information related to that particular question. These answer sections can initially remain hidden and are displayed when the corresponding FAQ item becomes active. Icons or additional elements can also be included inside the question section to indicate whether an item is currently open or closed. Finally, the script.js file is loaded near the bottom of the <body> so JavaScript can select the FAQ elements and add the required click functionality.

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

  <div class="faq-container">
    <h2>Frequently Asked Questions</h2>

    <div class="faq-item">
      <div class="faq-question">What is an accordion?</div>
      <div class="faq-answer">
        An accordion is a UI component that expands and collapses content sections.
      </div>
    </div>

    <div class="faq-item">
      <div class="faq-question">Is this responsive?</div>
      <div class="faq-answer">
        Yes, this accordion layout is fully responsive on all devices.
      </div>
    </div>

    <div class="faq-item">
      <div class="faq-question">Can multiple items be open?</div>
      <div class="faq-answer">
        No, only one item opens at a time for better readability.
      </div>
    </div>

  </div>

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

CSS Code

CSS controls the appearance and layout of the Accordion FAQ Section. The main FAQ container is styled with a suitable width, background, padding, rounded corners, and spacing to create a clean interface, each FAQ item receives its own spacing and border to separate the questions and the question section is styled as a clickable area, usually with a pointer cursor, so users understand that they can interact with it. The answer section can initially have limited height or remain hidden.

When JavaScript adds an active class to an FAQ item, CSS changes the appearance of the selected question and displays its answer. CSS transitions can also create a smooth opening and closing effect. Responsive styles help ensure that the FAQ section remains easy to use on smaller screens.

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #042453;
}

.faq-container {
  background: #ffffff;
  width: 500px;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.faq-item {
  border-bottom: 1px solid #e5e7eb;
}

.faq-question {
  padding: 15px;
  cursor: pointer;
  font-weight: 600;
  position: relative;
}

.faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  font-size: 20px;
}

.faq-item.active .faq-question::after {
  content: "−";
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 15px;
  color: #555;
  transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
  max-height: 100px;
  padding-bottom: 15px;
}

Javascript Code

JavaScript adds the interactive functionality to the Accordion FAQ Section. First, it selects all the FAQ questions or accordion items from the HTML. A click event listener is then added to each question. When a user clicks on a question, JavaScript identifies the related FAQ item and adds or removes an active class. The active class allows CSS to control whether the answer is visible or hidden.

Depending on the project implementation, JavaScript may also close other open FAQ items when a new question is selected. This creates the traditional accordion behavior where only one answer is visible at a time. The code can also update an icon, such as changing a plus symbol into a minus symbol, based on whether the FAQ item is open. Overall, this project demonstrates how click events, DOM selection, CSS classes, and styling can work together to create an interactive FAQ component.

const faqItems = document.querySelectorAll(".faq-item");

faqItems.forEach(item => {
  const question = item.querySelector(".faq-question");

  question.addEventListener("click", () => {
    faqItems.forEach(i => {
      if (i !== item) {
        i.classList.remove("active");
      }
    });

    item.classList.toggle("active");
  });
});