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.querySelectorAllto 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
answersNodeList 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.
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;
} |
Output: Click here to see live code output
FAQ feature