Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a FAQ page using JavaScript
Overview
The Frequent Asked Question (FAQ) is the main feature for the website which deals with the selling of products, registration for training or companies in a particular domain. There are many problems which arise for many users or can arise, so these questions and the solution for these problems are displayed in the FAQ section, so that if any user is facing any error he can resolve it by going through the FAQ part of the website and can continue his work.
Approach
The main approach to make a FAQ is an accordion. All the frequently asked questions are formatted in the form of an accordion. An accordion is a component which has a functionality of spread (open) and collapse. In the given below example we had built an accordion using HTML and CSS and had provided the functionality using javascript.
Algorithm
Step 1 − Create a HTML boilerplate and add a parent div to the body of the code which will contain the accordion-like component which will contain the solution of FAQ.
Step 2 − Create another div inside the parent div which will contain all the rendered frequently asked questions from an array.
Step 3 − Now initialize an array with objects inside as a key-value pair of ques-ans respectively. Put the frequent question and solution in it. Also initialize empty String type variables.
Step 4 − Use map() function for mapping the elements of an array with accordion component HTML template and concatenate all the elements with the empty string that we had previously initialized.
fsec += ` <div id="${i}" style="border-radius: 5px;box-shadow:0 0 5px #c5c5c5; padding:0.5rem; cursor:pointer;"> <div class="ques" onclick="showAns()"> <p style="filter: invert(1);">${f.ques}</p> <p style="filter: invert(1);">➕</p> </div> <div class="ans">${f.ans}</div> </div>`; })
Step 5 − Now use the innerHTML property and display the variable which contains all the concatenated elements of the array in a single variable.
document.getElementById("faqQues").innerHTML = fsec;
Step 6 − To give the functionality of open and close the answers section access the “ques” element in a variable using document.getElementById() property. To provide the functionality to every FAQ question use a for loop to give click() events in a particular element. Set the “ans” class name element style to “display:none”. Now use if-else condition to maintain the functionality of open-close.
var acc = document.getElementsByClassName("ques"); for (var i = 0; i < faqQuesAns.length; i++) { acc[i].addEventListener("click", function () { var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); }
Example
In this example, we had used the accordion which we had built using HTML and provided the open close functionality to it using Javascript. The FAQ page consists of a collection of frequently asked questions which are displayed on the Frequently Asked Question (FAQ) page.
<html>
<head>
<title>Tutorialspoint FAQ Page</title>
<style>
.faqSection {
display: flex;
flex-direction: column;
width: 40rem;
margin: auto;
}
.ques {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 800;
background: #40a944;
border-radius: 5px;
padding: 0.5rem
}
.ans {
display: none;
padding-top: 1rem;
}
</style>
</head>
<body style="height: 95vh; display: flex; place-content: center;">
<div class="faqSection>
<p style="text-align: center;">FAQ</p>
<div id="faqQues" style="display: flex;flex-direction: column;gap: 1rem;"></div>
</div>
<script>
var faqQuesAns = [
{"ques": "How to join training program courses on tutorialspoint?", "ans": `To join our training program courses, Visit us at: <a href= https://www.tutorialspoint.com/index.htm"> https://www.tutorialspoint.com/index.htm </a>`},
{"ques": "Which courses are available on tutorialspoint ?", "ans": "Get all the training program courses on our platform. Complete the training in your particular domain and get your certificate now."},
{"ques": "Benifits of joining annual membership of tutorialspoint?", "ans": `The annual membership provides you to access 5500+ hand picked quality video. Join Now: <a href="https://www.tutorialspoint.com/index.htm"> https://www.tutorialspoint.com/index.htm </a>`},
{"ques": "Who writes the contents for tutorialspoint.com?", "ans": "The content on the website are created by highly skilled professionals. A number of freelancers helped us in our effort to build a database of quality tutorials. They contributed their best tutorials into our Shared Tutorials Dictionary. We have established permanent setup in Hyderabad, INDIA, where we have a dedicated team of subject matters experts, technical writers, web developers and graphics designers who are taking the website to its next height of excellence."} ];
var fsec = "";
faqQuesAns.map((f, i) => {
fsec += ` <div id="${i}" style="border-radius: 5px;box-shadow:0 0 5px #c5c5c5; padding:0.5rem; cursor:pointer;">
<div class="ques" onclick="showAns()">
<p style="filter: invert(1);">${f.ques}</p>
<p style="filter: invert(1);">➕</p>
</div>
<div class="ans">${f.ans}</div>
</div>`;
})
document.getElementById("faqQues").innerHTML = fsec;
var qsec = document.getElementsByClassName("ques");
for (var i = 0; i < faqQuesAns.length; i++) {
qsec[i].addEventListener("click", function () {
var answer = this.nextElementSibling;
if (answer.style.display === "block") {
answer.style.display = "none";
} else {
answer.style.display = "block";
}
});
}
</script>
</body>
</html>
The below image shows all the frequently asked questions on the web page. As in the above example we had rendered the question from an array. The displayed web page is responsive in nature which can also be viewed on mobile phone or tablet.
Conclusion
The Frequently Asked Question (FAQ) webpage of a website is a page which contains the collection of some question which was asked previously by some of their users. These questions are displayed on the FAQ page so that in future if some other user faces the same problem he can visit the FAQ page and can check if its problem is the same as mentioned in the FAQ page so he can resolve his problem. To load the Frequently Asked Question in a real time project instead of loading the data from an array we can use an API which will connect the frontend from the database and will load the question directly from the database.
383 Views
