Build a FAQ Accordion Website

Introduction

Hello, developers! I’m excited to share my latest project: a FAQ Accordion web application. This project is perfect for those looking to create an interactive and user-friendly FAQ section for their websites. It’s a great way to enhance your frontend development skills using HTML, CSS, and JavaScript while building a practical component that can be used in various applications.

Project Overview

The FAQ Accordion is a web application designed to display frequently asked questions in an expandable and collapsible format. With a clean and modern design, it allows users to click on a question to reveal the corresponding answer. This project showcases how to create an interactive FAQ section that improves user experience by making content easily accessible.

Features

Interactive Accordion: Users can click on questions to toggle the visibility of answers, enhancing content readability.
Responsive Design: The application is fully responsive, ensuring an optimal viewing experience on both desktop and mobile devices.
Dynamic Icons: Icons change to indicate whether an answer is expanded or collapsed.

Technologies Used

HTML: Provides the structure for the FAQ Accordion application.
CSS: Styles the application to create a clean and responsive design.
JavaScript: Manages the interactive elements, including expanding and collapsing answers and toggling icons.

Project Structure

Here’s an overview of the project structure:

FAQ-Accordion/
├── index.html
├── style.css
└── script.js

index.html: Contains the HTML structure for the FAQ Accordion application.
style.css: Includes CSS styles to create an engaging and responsive design.
script.js: Manages the interactive elements, such as expanding and collapsing answers and updating icons.

Installation

To get started with the project, follow these steps:

Clone the repository:

git clone https://github.com/abhishekgurjar-in/FAQ-Accordion.git

Open the project directory:
```
cd FAQ-Accordion
```
Run the project:
- Open the index.html file in a web browser to view the FAQ Accordion application.

Usage

Open the application in a web browser.
Click on a question to toggle the visibility of the answer.
Expand and collapse different questions to view their answers.
Update or add new questions as needed.

Code Explanation

HTML

The index.html file defines the structure of the FAQ Accordion application, including questions and answers. Here’s a snippet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FAQ accordion</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <div class="conatiner">
      <img src="./assets/images/background-pattern-desktop.svg" alt="" />
      <div class="box">
        <h1>
          FAQs
          <span class="imageStar">
            <img src="./assets/images/icon-star.svg" alt=""
          /></span>
        </h1>
        <section class="section">
          <div class="question">
            <h3>Is Frontend Mentor free?</h3>
            <div class="icon-img">
              <img src="./assets/images/icon-plus.svg" alt="" />
            </div>
          </div>
          <div class="answer">
            <p>
              Frontend Mentor offers realistic coding challenges to help
              developers improve their frontend coding skills with projects in
              HTML, CSS, and JavaScript. It's suitable for all levels and ideal
              for portfolio building.
            </p>
          </div>
          <hr />
        </section>
        <section class="section">
          <div class="question">
            <h3>Can I use Frontend Mentor projects in my portfolio?</h3>
            <div class="icon-img">
              <img src="./assets/images/icon-plus.svg" alt="" />
            </div>
          </div>
          <div class="answer">
            <p>
              Yes, Frontend Mentor offers both free and premium coding
              challenges, with the free option providing access to a range of
              projects suitable for all skill levels.
            </p>
          </div>
          <hr />
        </section>
        <section class="section">
          <div class="question">
            <h3>Can I use Frontend Mentor projects in my portfolio?</h3>
            <div class="icon-img">
              <img src="./assets/images/icon-plus.svg" alt="" />
            </div>
          </div>
          <div class="answer">
            <p>
              Yes, you can use projects completed on Frontend Mentor in your
              portfolio. It's an excellent way to showcase your skills to
              potential employers!
            </p>
          </div>
          <hr />
        </section>
        <section class="section">
          <div class="question">
            <h3>
              How can I get help if I'm stuck on a Frontend Mentor challenge?
            </h3>
            <div class="icon-img">
              <img src="./assets/images/icon-plus.svg" alt="" />
            </div>
          </div>
          <div class="answer">
            <p>
              The best place to get help is inside Frontend Mentor's Discord
              community. There's a help channel where you can ask questions and
              seek support from other community members.
            </p>
          </div>
          <hr />
        </section>
      </div>
    </div>

  </body>
</html>

CSS

The style.css file styles the FAQ Accordion application, ensuring it’s visually appealing and responsive. Below are some key styles:

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  background-color: hsl(275, 100%, 97%);

}

img {
  width: 100%;
  position: fixed;
}

.container {
  position: absolute;
}

.box {
  top: 100px;
  margin: 0 auto;
  background-color: hsl(0, 0%, 100%);
  max-width: 555px;
  position: relative;
  border-radius: 13px;
  padding: 20px;
}

.imageStar img {
  width: 36px;
  margin-left: 10px;
}

.section {
  padding: 5px;
}

.question {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.answer {
  display: none;
  overflow: hidden;
  padding: 10px;
}

.answer.active {
  display: block;
}

.icon-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-img img {
  position: fixed;
  width: 19px;
}

@media (max-width: 700px) {
  .box {
    max-width: 500px;
  }
}

@media (max-width: 500px) {
  .box {
    max-width: 400px;
  }
}

JavaScript

The script.js file contains the functionality for expanding and collapsing answers. Here’s a snippet for demonstration:

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

questions.forEach(question => {
  question.addEventListener("click", () => {
    const answer = question.nextElementSibling;
    const icon = question.querySelector(".icon-img img");

    // Toggle answer visibility
    answer.classList.toggle("active");

    // Change icon
    if (answer.classList.contains("active")) {
      icon.src = "./assets/images/icon-minus.svg";
    } else {
      icon.src = "./assets/images/icon-plus.svg";
    }
  });
});

Live Demo

You can check out the live demo of the FAQ Accordion project here.

Conclusion

Building the FAQ Accordion application was a rewarding experience in creating an interactive and user-friendly FAQ section. This project highlights the importance of user engagement and content accessibility. By applying HTML, CSS, and JavaScript, we’ve developed a component that enhances user experience by making frequently asked questions easily accessible. I hope this project inspires you to build your own interactive components. Happy coding!

Credits

This project was developed as part of my continuous learning journey in web development.

Author

Abhishek Gurjar
- GitHub Profile

Blog