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, we have created a Frequently Asked Questions(FAQ) accordion using HTML, CSS, and JavaScript. The accordion is used to display the content in list format. It can expand or collapse to display the content it contains.
Digital Frequently Asked Questions (FAQ) in JavaScript [Source Codes]
To create this program [Frequently Asked Questions (FAQ) ]. First, you need to create three files, HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your files. You can also download the source code files of the Digital Clock from the given download buttom.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!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 JavaScript</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
</head>
<body>
<div class="container">
<h1 class="title">
Frequenty Asked Questions
</h1>
<main class="accordion">
<div class="faq-img">
<img src="img/faq.svg" alt="" class="accordion-img">
</div>
<div class="content-accordion">
<div class="question-answer">
<div class="question">
<h3 class="title-question">
Do you do a Front-end developer?
</h3>
<button class="question-btn">
<span class="up-icon">
<i class="fas fa-chevron-up"></i>
</span>
<span class="down-icon">
<i class="fas fa-chevron-down"></i>
</span>
</button>
</div>
<div class="answer">
<p>Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Quisquam assumenda sapiente
mollitia excepturi quos id
magnam obcaecati non est?
Maiores?</p>
</div>
</div>
<div class="question-answer">
<div class="question">
<h3 class="title-question">
What is the differrence between
Front-end and Back-end?
</h3>
<button class="question-btn">
<span class="up-icon">
<i class="fas fa-chevron-up"></i>
</span>
<span class="down-icon">
<i class="fas fa-chevron-down"></i>
</span>
</button>
</div>
<div class="answer">
<p>Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Quisquam assumenda sapiente
mollitia excepturi quos id
magnam obcaecati non est?
Maiores?</p>
</div>
</div>
<div class="question-answer">
<div class="question">
<h3 class="title-question">
Which is better Front-end or Back-end?
</h3>
<button class="question-btn">
<span class="up-icon">
<i class="fas fa-chevron-up"></i>
</span>
<span class="down-icon">
<i class="fas fa-chevron-down"></i>
</span>
</button>
</div>
<div class="answer">
<p>Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Quisquam assumenda sapiente
mollitia excepturi quos id
magnam obcaecati non est?
Maiores?</p>
</div>
</div>
<div class="question-answer">
<div class="question">
<h3 class="title-question">
What is Front-end?
</h3>
<button class="question-btn">
<span class="up-icon">
<i class="fas fa-chevron-up"></i>
</span>
<span class="down-icon">
<i class="fas fa-chevron-down"></i>
</span>
</button>
</div>
<div class="answer">
<p>Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Quisquam assumenda sapiente
mollitia excepturi quos id
magnam obcaecati non est?
Maiores?</p>
</div>
</div>
<div class="question-answer">
<div class="question">
<h3 class="title-question">
What is Back-end?
</h3>
<button class="question-btn">
<span class="up-icon">
<i class="fas fa-chevron-up"></i>
</span>
<span class="down-icon">
<i class="fas fa-chevron-down"></i>
</span>
</button>
</div>
<div class="answer">
<p>Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Quisquam assumenda sapiente
mollitia excepturi quos id
magnam obcaecati non est?
Maiores?</p>
</div>
</div>
</div>
</main>
</div>
<script src="main.js"></script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 12px;
}
body {
min-height: 100vh;
font-family: 'Poppins', sans-serif;
background: #efefef;
display: flex;
justify-content: center;
}
.container {
position: relative;
background: #fff;
margin-top: 50px;
margin-bottom: 30px;
border-radius: 10px;
filter: drop-shadow(0 0 10px
rgba(0, 0, 0, 0.5));
}
.accordion {
position: relative;
width: 350px;
margin-left: 40px;
}
.title {
margin-top: 20px;
font-size: 2rem;
text-align: center;
}
.content-accordion {
margin-top: 35px;
margin-right: 50px;
}
.question-answer {
width: 100%;
border-bottom: 1px solid #e8e8e8;
}
.question {
display: flex;
justify-content: space-between;
}
.accordion-img {
position: relative;
width: 320px;
}
.title-question {
margin: 1.4rem 0rem;
font-size: 1.2rem;
font-weight: 500;
color: #000;
}
.question-btn {
font-size: 1.5rem;
background: transparent;
border-color: transparent;
cursor: pointer;
}
.up-icon {
display: none;
}
.answer {
font-size: 1.2rem;
line-height: 1.8;
display: none;
}
.show-text .answer {
display: block;
}
.show-text .up-icon {
display: inline;
}
.show-text .down-icon {
display: none;
}
@media screen and (min-width: 992px) {
.accordion {
width: 920px;
height: 0;
display: flex;
}
.accordion-img {
position: relative;
width: 420px;
top: 88px;
}
.question-answer {
width: 380px;
}
.content-accordion {
margin-top: 85px;
}
.title {
margin-top: 50px;
font-size: 3rem;
}
}
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.
const questions = document.querySelectorAll('.question-answer');
questions.forEach(function(question) {
const btn = question.querySelector('.question-btn');
btn.addEventListener("click", function() {
questions.forEach(function(item) {
if (item !== question) {
item.classList.remove("show-text");
}
})
question.classList.toggle("show-text");
})
})
Download Source Code: Frequently Asked Questions in JavaScript
That’s all, now you’ve successfully Build Frequently Asked Questions (FAQ) in JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.
Here are a few helpful posts you might want to read, too:
Why learning code? 7 Essential Benefits From Learning Programming
6 Things To Know Before Learning Programming
How to Teach Yourself to Learn Code
If you enjoyed this post about the Frequently Asked Questions Using JavaScript just drop me a line in the comments below!
P.S. If you found this post helpful, please share it with others! Thanks for your support!
0 comments:
Post a Comment