Introduction
Frequently asked question is a question and answer based web project. This project deals with displaying questions and answers. Frequently asked question project is coded in HTML5, CSS, and JavaScript.
In this tutorial, we will be creating a static web page that displays questions and answers. First, we need to create a folder with HTML, CSS, and js files. This type of frequently asked question can be seen in different websites which shows the solutions of the problems. We are using a container that includes frequently asked question and a button.
This project frequently asked question has a simple layout with drop down boxes. The box includes questions and as the drop-down button is clicked we can see the answer of that question. Drop down button functionality is added via JavaScript code. You need to run index.html file in the browser to run the project. See the screenshot below.
Source codes for frequently asked question
HTML will be used for displaying a button and text on screen. We use the COVID-19 FAQs question in this frequently asked question project. You can get those questions from this website CDC (Centers for disease control and prevention). Be safe from COVID-19.
index.html
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<title>FAQ</title>
</head>
<body>
<h1>Frequently Asked Question</h1>
<div class="faq-container">
<div class="faq active">
<h3 class="faq-title">
What is COVID 19?
</h3>
<p class="faq-text">
COVID-19 is a new disease, caused by a novel (or new) coronavirus that has not previously been seen in humans. Because it is a new virus, scientists are learning more each day. Although most people who have COVID-19 have mild symptoms, COVID-19 can also cause severe illness and even death. Some groups, including older adults and people who have certain underlying medical conditions, are at increased risk of severe illness.
</p>
<button class="faq-toggle">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-times"></i>
</button>
</div>
<div class="faq">
<h3 class="faq-title">
Why is the disease called Coronavirus, COVID-19?
</h3>
<p class="faq-text">
On February 11, 2020 the World Health Organization announced an official name for the disease that is causing the 2019 novel coronavirus outbreak, first identified in Wuhan China. The new name of this disease is coronavirus disease 2019, abbreviated as COVID-19. In COVID-19, “CO” stands for corona, “VI” for virus, and ”D” for disease. Formerly, this disease was referred to as “2019 novel coronavirus” or “2019-nCoV.”
</p>
<button class="faq-toggle">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-times"></i>
</button>
</div>
<div class="faq">
<h3 class="faq-title">
How does the virus spread?
</h3>
<p class="faq-text">
COVID-19 spreads very easily from person to person. How easily a virus spreads from person to person can vary. The virus that causes COVID-19 appears to spread more efficiently than influenza but not as efficiently as measles, which is among the most contagious viruses known to affect people. </p>
<button class="faq-toggle">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-times"></i>
</button>
</div>
<div class="faq">
<h3 class="faq-title">
Will warm weather stop the outbreak of COVID-19?
</h3>
<p class="faq-text">
It is not yet known whether weather and temperature affect the spread of COVID-19. Some other viruses, like those that cause the common cold and flu, spread more during cold weather months but that does not mean it is impossible to become sick with these viruses during other months. There is much more to learn about the transmissibility, severity, and other features associated with COVID-19 and investigations are ongoing.
</p>
<button class="faq-toggle">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-times"></i>
</button>
</div>
<div class="faq">
<h3 class="faq-title">
What is community spread?
</h3>
<p class="faq-text">
Community spread means people have been infected with the virus in an area, including some who are not sure how or where they became infected. Each health department determines community spread differently based on local conditions. </p>
<button class="faq-toggle">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-times"></i>
</button>
</div>
<div class="faq">
<h3 class="faq-title">
How to protect against COVID-19?
</h3>
<p class="faq-text">
Handwashing is one of the best ways to protect yourself and your family from getting sick. Wash your hands often with soap and water for at least 20 seconds, especially after blowing your nose, coughing, or sneezing; going to the bathroom; and before eating or preparing food. If soap and water are not readily available, use an alcohol-based hand sanitizer with at least 60% alcohol.
</p>
<button class="faq-toggle">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-times"></i>
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
We will be using CSS for styling the whole project. Such as background colour, box, text, buttons, colors and many more. Further, we add a font-awesome icon using CSS.
style.css
/* Frequently asked question css */
@import url('https://fonts.googleapis.com/css?Muli&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Muli', sans-serif;
background-color: aliceblue;
}
h1 {
margin: 50px 0 30px;
text-align: center;
}
.faq-container {
max-width: 600px;
margin: 0 auto;
}
.faq {
background-color: transparent;
border: 1px solid #9fa4a8;
border-radius: 10px;
margin: 20px 0px;
padding: 30px;
position: relative;
overflow: hidden;
transition: 1.2s ease;
}
.faq.active {
background-color: #fff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
}
.faq.active::before,
.faq.active::after {
content: '\e063';
font-family: 'Font Awesome 5 Free';
color: blue;
font-size: 7rem;
position: absolute;
opacity: 0.1;
top: 20px;
left: 20px;
z-index: 0;
}
.faq.active::before {
color: blue;
top: -10px;
left: -30px;
transform: rotateY(180deg);
}
.faq-title {
margin: 0 35px 0 0;
}
.faq-text {
display: none;
margin: 30px 0 0;
}
.faq.active .faq-text {
display: block;
}
.faq-toggle {
background-color: transparent;
border: 0;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
padding: 0;
position: absolute;
top: 30px;
right: 30px;
height: 30px;
width: 30px;
}
.faq-toggle:focus {
outline: 0;
}
.faq-toggle .fa-times {
display: none;
}
.faq.active .faq-toggle .fa-times {
color: #fff;
display: block;
}
.faq.active .faq-toggle .fa-chevron-down {
display: none;
}
.faq.active .faq-toggle {
background-color: blue;
opacity: 0.2;
}
The JavaScript code is added for making drop-down button clickable. If you click the button you will get the answer and again clicking the close button will take you to the previous state. There are two buttons working drop down and close. An even listener is added on those buttons. Check the js code below.
script.js
// Frequently asked question js
const toggles = document.querySelectorAll('.faq-toggle')
toggles.forEach(toggle => {
toggle.addEventListener('click', () => {
toggle.parentNode.classList.toggle('active')
})
})