Hello Coders, In this article we are going to learn how to create FAQ Accordion Section using HTML CSS and JS.
What is FAQ Section?
FAQ means Frequently asked questions. Most of the websites on the internet often use FAQ section to answer few of the repeatedly asked questions. For example, users might have few questions on a product that all other users might have the same questions. So in that case, FAQ section helps them get answer for their questions.
How many questions to add in FAQ Section ?
A Typical website has around 5-10 questions answered which are asked frequently. If your website has more questions to be answered then its okay to add as much as you want. 5-10 would be great.
I have provided step by step video tutorial as well as complete source code of FAQ accordion section in this article.
FAQ Accordion Section in HTML CSS and JavaScript | Video Tutorial
In the above video, I have shown how to build FAQ section in step by step way and I have also shown how it works. Consider watching the video tutorial if you are a beginner.
FAQ Section Accordion with HTML CSS and JavaScript | Source Code
Below I have given all the necessary source code for you to build it. You can also download complete source code of FAQ section from the download button at the bottom of this article.
How do I create FAQ Section in HTML? Free HTML Source Code
Create an index.html file. Add all the boiler plate such as html, head, title, body tags. Follow the below html code to complete the html part
HTML Code : Create a main container. Inside the main container create another container with class ‘accordion’. This is going to hold all our accordion items. Inside the accordion create 5 accordion item div tags. And add the following code.
<!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</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<h2>Frequently Asked Questions</h2>
<div class="accordion">
<div class="accordion-item">
<button id="accordion-button-1" aria-expanded="false">
<span class="accordion-title">Why is the moon sometimes out during the day?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-2" aria-expanded="false">
<span class="accordion-title">Why is the sky blue?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-3" aria-expanded="false">
<span class="accordion-title">Will we ever discover aliens?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-4" aria-expanded="false">
<span class="accordion-title">How much does the Earth weigh?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-5" aria-expanded="false">
<span class="accordion-title">How do airplanes stay up?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
How do I design FAQ Section in CSS? Free CSS Source Code
Create an styles.css file and link it our html document. Now its time to add some CSS. Follow the below css code to complete the CSS part.
CSS Code : For the CSS, we are going to use a custom font imported from the google font. Go head and start typing the CSS code from top to bottom and start observing the changes.
@import url('https://fonts.googleapis.com/css?family=Hind:300,400&display=swap');
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: 'Hind', sans-serif;
background: #fff;
color: #4d5974;
display: flex;
min-height: 100vh;
}
.container {
margin: 0 auto;
padding: 4rem;
width: 48rem;
}
.accordion .accordion-item {
border-bottom: 1px solid #e5e5e5;
}
.accordion .accordion-item button[aria-expanded='true'] {
border-bottom: 1px solid #03b5d2;
}
.accordion button {
position: relative;
display: block;
text-align: left;
width: 100%;
padding: 1em 0;
color: #7288a2;
font-size: 1.15rem;
font-weight: 400;
border: none;
background: none;
outline: none;
}
.accordion button:hover,
.accordion button:focus {
cursor: pointer;
color: #03b5d2;
}
.accordion button:hover::after,
.accordion button:focus::after {
cursor: pointer;
color: #03b5d2;
border: 1px solid #03b5d2;
}
.accordion button .accordion-title {
padding: 1em 1.5em 1em 0;
}
.accordion button .icon {
display: inline-block;
position: absolute;
top: 18px;
right: 0;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 22px;
}
.accordion button .icon::before {
display: block;
position: absolute;
content: '';
top: 9px;
left: 5px;
width: 10px;
height: 2px;
background: currentColor;
}
.accordion button .icon::after {
display: block;
position: absolute;
content: '';
top: 5px;
left: 9px;
width: 2px;
height: 10px;
background: currentColor;
}
.accordion button[aria-expanded='true'] {
color: #03b5d2;
}
.accordion button[aria-expanded='true'] .icon::after {
width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
opacity: 1;
max-height: 9em;
transition: all 200ms linear;
will-change: opacity, max-height;
}
.accordion .accordion-content {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 200ms linear, max-height 200ms linear;
will-change: opacity, max-height;
}
.accordion .accordion-content p {
font-size: 1rem;
font-weight: 300;
margin: 2em 0;
}
JavaScript Code : Lets make it work when we click on the text as well as the button. Follow the below javascript code. First we will select the button which is inside the accordion and call a function when we click on it.
const items = document.querySelectorAll('.accordion button');
function toggleAccordion() {
const itemToggle = this.getAttribute('aria-expanded');
for (i = 0; i < items.length; i++) {
items[i].setAttribute('aria-expanded', 'false');
}
if (itemToggle == 'false') {
this.setAttribute('aria-expanded', 'true');
}
}
items.forEach((item) => item.addEventListener('click', toggleAccordion));
This is what you will get at the end as a result.
Thank you for Reading this article
Credits: Katherine Kato
Click on the download button to directly Download Source Code of FAQ Accordion Section.
