How to create a FAQ page using JavaScript ?

Last Updated : 28 Apr, 2022

The frequently Asked Questions (FAQ) section is one of the most important sections of any website, especially if you are providing services. If you want to learn how to make it by yourself then welcome! today we'll learn how to create a FAQ page using JavaScript.

Functionalities required in a FAQ page:

Initially, only questions are displayed where each question is separated by a line.
On clicking plus icon, the answer section is expanded and an answer to a particular question is displayed.
When a plus icon is clicked and an answer section is displayed, a cross icon replaces the plus icon.
When a cross icon is clicked answer section collapse and the cross icon is again replaced by a plus icon.

HTML and CSS will take care of the UI and javascript will help us in achieving the above functionalities, So let's get started.

HTML: You can use different HTML tags to create your page skeleton, here you have used the unordered list to create a page skeleton.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" 
          integrity=
"sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <link rel="stylesheet" href="styles.css"/>
</head>
<body>
    <div class="container">
        <h1>FAQs</h1>
        <ul>
            <li class="faq">
                <div class="question">
                    Which is the best portal to study 
                    Computer Science?
                    <span class="icon-main">
                        <i class="fa-solid fa-plus"></i>
                    </span>
                </div>
                <div class="answer non-active">
                    GeeksforGeeks is the best Computer 
                    Science portal for geeks. It contains 
                    well written, well thought and well 
                    explained computer science and 
                    programming articles.
                </div>
            </li>
            <li class="faq">
                <div class="question">
                    What is a FAQ section?
                    <span class="icon-main">
                        <i class="fa-solid fa-plus"></i>
                    </span>
                </div>
                <p class="answer non-active">the Frequently 
                    Asked Questions (FAQ) section is 
                    a part of your website where you 
                    address common concerns, questions,
                    and objections that customers have.
                </p>

            </li>
            <li class="faq">
                <div class="question">
                    What should be included in a FAQ section?
                    <span class="icon-main">
                        <i class="fa-solid fa-plus"></i>
                    </span>
                </div>
                <p class="answer non-active">
                    Fully answer the question, don't 
                    just link to a different page.
                </p>

            </li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Note: Here we have used FontAwesome icons for icons and google fonts for new font styles.

CSS

@import url(
"https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Slab&family=Spartan:wght@400;700&display=swap");

.container {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -20%);
  width: 60%;
}
h1 {
  text-align: center;
  font-family: "Roboto Slab", serif;
  font-size: 40px;
}
li {
  list-style: none;
  margin-bottom: 10px;
  padding: 15px;
  border-bottom: 2px solid #6d6b6b;
}
.question {
  font-family: "Spartan", sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  position: relative;
  color: #5c5a5a;
}
.icon-main {
  position: absolute;
  right: 0px;
  cursor: pointer;
}
.non-active {
  display: none;
}
.answer{
  font-size: 17px;
  font-family: "Spartan", sans-serif;
}

Here a "non-active" class has assigned a CSS property display: none which is responsible for expanding and collapsing of answer section.

JavaScript:

JavaScript

const faqs = document.querySelectorAll(".faq");
for (const item of faqs) {
  const curr_faq = item.childNodes;
  const question = curr_faq[1];
  const answer = curr_faq[3];
  const icon = question.querySelector(".icon-main");
  icon.addEventListener("click", function () {
    answer.classList.toggle("non-active");
    const i = icon.querySelector("i");
    i.classList.toggle("fa-xmark");
    i.classList.toggle("fa-plus");
    console.log(i);
  });
}

Approach:

Variable faqs contain an array of all <li> elements which depends on the number of questions on a FAQ page. Since we want each question and answer pair to possess the same functionalities therefore we have to loop over this faqs array and add the following properties to each li element.
Since we are looping over li elements and question and answer divs are the child element of it, so to extract them we can use the childNodes property which returns an array, and below are its contents.

Since we are interested only in div.question and div.answer we extract the first and the third element of the curr_faq array.
You can also extract the child elements from the parent element by using the querySelector method on the parent element which we had also used to get the icon element.
If the answer element contains a non-active class(which means that currently the answer section is collapsed) then remove it when the plus icon is clicked. Similarly, if the answer element does not contain the non-active class(which means that currently the answer section is expanded) then add it when the cross icon is clicked.
You can use classList.add() and classList.remove() methods to remove and add a non-active class which provides us expansion and collapse features over an answer element. But I prefer to use classList.toggle() method which does both works together for us and reduces some lines of code.
Also, add and remove fa-plus and fa-xmark classes whenever required to toggle between plus and cross icons.

Hurray! our FAQ page is ready. Let's combine our HTML, CSS, and Javascript code to see what our page looks like.

Final Code: