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
- 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.
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" > w3wiki </ 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
Contact Us