How to create an FAQ section to any website using JavaScript ?
Last Updated :
18 Apr, 2025
Improve
We will create a Frequently Asked Questions(FAQ) accordion using JavaScript. The accordion is used to display the content in list format. It can expand or collapse to display the content it contains.
Approach
- Selection of Elements:
- Use
document.querySelectorAll
to select all elements with the class “accordion” and store them in the variableanswers
. This assumes that these elements represent the accordion items.
- Use
- Event Listener Iteration:
- Iterate over each element in the
answers
NodeList usingforEach
.
- Iterate over each element in the
- Event Listener Registration:
- Attach a click event listener to each accordion element.
- Toggle Class:
- Inside the event listener, check if the current element (
event
) has the class “active” usingclassList.contains
. - If it does, remove the “active” class; otherwise, add the “active” class.
- Inside the event listener, check if the current element (
- Accordion Toggle:
- The logic toggles the “active” class, allowing the accordion items to expand or collapse based on their current state.
Example: This example shows the implementation of the above-explained approach.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="main.js"></script>
</head>
<body>
<h2 style="color:green; text-align:center">
GeeksforGeeks
</h2>
<div class="layout">
<div class="accordion">
<div class="accordion__question">
<p>Where is Taj Mahal located?</p>
</div>
<div class="accordion__answer">
<p>Taj Mahal is located in Agra, Uttar Pradesh.</p>
</div>
</div>
<div class="accordion">
<div class="accordion__question">
<p>How many planets are there in solar system?</p>
</div>
<div class="accordion__answer">
<p>
There are eight planets in solar system.
Mercury, Venus, Earth, Mars, Jupiter, Saturn,
Uranus, and Neptune.
</p>
</div>
</div>
</div>
</body>
</html>
body {
background-color: rgb(153, 218, 196);
}
.layout {
width: 600px;
margin: auto;
}
.accordion {
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
background: rgb(105, 206, 105);
border-radius: 10px;
}
.accordion__question p {
margin: 5px;
padding: 0;
font-family: Verdana;
font-size: 20px;
}
.accordion__answer p {
margin: 5px;
padding: 10px;
font-size: large;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: rgb(255, 255, 255);
background: rgb(82, 170, 122);
border-radius: 10px;
}
.accordion:hover {
cursor: pointer;
}
.accordion__answer {
display: none;
}
.accordion.active .accordion__answer {
display: block;
}
let answers = document.querySelectorAll(".accordion");
answers.forEach((event) => {
event.addEventListener("click", () => {
if (event.classList.contains("active")) {
event.classList.remove("active");
} else {
event.classList.add("active");
}
});
});
Output

FAQ feature