The Frequently Asked Questions (FAQ) page can improve user experience. All websites should have an FAQ page because it reduces the time your employees need to answer simple questions. It allows visitors to find answers to all their questions in one place. And an FAQ page can be a great source of content ideas.
In this tutorial, I’m going to show you how to create a simple FAQ page in HTML, CSS, and JavaScript. Before we start building our FAQ page, we will look out what an FAQ page is and why it is important.
What is an FAQ Page?
The Frequently Asked Questions page is one of the most helpful pages on any website. It allows visitors to find answers to all their questions in one place. They give your visitors the chance to learn more about your website with answers to common concerns or questions anyone might have.
FAQ is one of the most overlooked pages, but you can hardly find a popular online store or a website without it.
Why do you need an FAQ page?
- Improves the user experience of a website.
- Reduces the time your employees need to answer simple questions.
- Allows visitors to find answers to all their questions in one place.
- It is a great source for content ideas.
Prerequisites
This tutorial assumes you are comfortable using HTML, CSS and Javascript. Before we begin you will have to create the following files: HTML file, CSS file, and the last JavaScript file.
The segment below describes the steps to be taken for building this FAQ page.
Step One: Structuring our HTML documents
HTML Code: in this section, the elements of the FAQ page are created and loaded. Next, we create and link the style.css and index.js file. add font links and icon links. It also defines the structure of the FAQ page.
We wrapped our HTML elements in a section with a class name of FAQ-container. This section contains different elements which are split into parts. The first part contains the question while the second part contains the answers that belong to the same category section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ PAGE</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<h1 class="faq-heading">FAQ'S</h1>
<section class="faq-container">
<div class="faq-one">
<!-- faq question -->
<h1 class="faq-page">What is an FAQ Page?</h1>
<!-- faq answer -->
<div class="faq-body">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit saepe sequi, illum facere
necessitatibus cum aliquam id illo omnis maxime, totam soluta voluptate amet ut sit ipsum
aperiam.
Perspiciatis, porro!</p>
</div>
</div>
<hr class="hr-line">
<div class="faq-two">
<!-- faq question -->
<h1 class="faq-page">Why do you need an FAQ page?</h1>
<!-- faq answer -->
<div class="faq-body">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit saepe sequi, illum facere
necessitatibus cum aliquam id illo omnis maxime, totam soluta voluptate amet ut sit ipsum
aperiam.
Perspiciatis, porro!</p>
</div>
</div>
<hr class="hr-line">
<div class="faq-three">
<!-- faq question -->
<h1 class="faq-page">Does it improves the user experience of a website?</h1>
<!-- faq answer -->
<div class="faq-body">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit saepe sequi, illum facere
necessitatibus cum aliquam id illo omnis maxime, totam soluta voluptate amet ut sit ipsum
aperiam.
Perspiciatis, porro!</p>
</div>
</div>
</section>
</main>
<script src="main.js"></script>
</body>
</html>
Step Two: Positioning our layouts and styling
CSS Code: This section contains the positioning of our FAQ page, the font size, and the styling of the elements.
- Create layout columns,
- For our content to be readable, we must use a good font. Check out this link for the font used in the project google font.
- Center page in the middle of the window
body{
font-family: 'Work Sans', sans-serif;
}
.faq-heading{
border-bottom: #777;
padding: 20px 60px;
}
.faq-container{
display: flex;
justify-content: center;
flex-direction: column;
}
.hr-line{
width: 60%;
margin: auto;
}
/* Style the buttons that are used to open and close the faq-page body */
.faq-page {
/* background-color: #eee; */
color: #444;
cursor: pointer;
padding: 30px 20px;
width: 60%;
border: none;
outline: none;
transition: 0.4s;
margin: auto;
}
.faq-body{
margin: auto;
/* text-align: center; */
width: 50%;
padding: auto;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.faq-page:hover {
background-color: #F9F9F9;
}
/* Style the faq-page panel. Note: hidden by default */
.faq-body {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.faq-page:after {
content: '\02795';
/* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796";
/* Unicode character for "minus" sign (-) */
}
Step Three: Adding functionalities
JavaScript Code: This section contains the part of the code that controls the functionalities of the FAQ page: the event handling.
Now we are going to add javascript to make our FAQ page functional. Currently, our page looks beautiful but doesn’t work well because we haven’t included our javascript, but we can make it so much better.
main.js file
var faq = document.getElementsByClassName("faq-page");
var i;
for (i = 0; i < faq.length; i++) {
faq[i].addEventListener("click", function () {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var body = this.nextElementSibling;
if (body.style.display === "block") {
body.style.display = "none";
} else {
body.style.display = "block";
}
});
}
Output
Conclusion
Having an FAQ page is essential and can serve as a better experience for your end-users that brings real value to your website. I hope this article has given you reasons for having an FAQ page on your website and how to build it.
You can check out the code here on my Github page
