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

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

1. 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.
2. Event Listener Iteration:
   • Iterate over each element in the answers NodeList using forEach.
3. Event Listener Registration:
   • Attach a click event listener to each accordion element.
4. 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.
5. 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.

Output