How to create an FAQ section to any website using JavaScript ?

Last Updated : 11 Jan, 2024

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 variable answers. This assumes that these elements represent the accordion items.
Event Listener Iteration:
- Iterate over each element in the answers NodeList using forEach.
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” using classList.contains.
- If it does, remove the “active” class; otherwise, add the “active” class.
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.

Javascript

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");
        }
    });
});

HTML

<!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>

CSS

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;
}