Hi everyone! In this article, I’m going to walk you through the HTML, CSS, and JavaScript code used to create a beautiful and interactive FAQ section for a website. Don’t worry if you have no prior knowledge of web development – I’ll explain everything step-by-step. Let’s get started!
HTML Explanation
First, let’s look at the HTML code. It structures the content on the page. We create a main container for our FAQ section using a <div> element with a class of faq-section. Inside this, we have a <div> for the title and another <div> to hold all the FAQ items.
Each FAQ item consists of a card <div>. Inside each card, we have a card-header for the question and a card-body for the answer. The faq-title inside the card-header includes a badge and the question text. We repeat this pattern for multiple FAQ items, with each item having a unique question and answer.
Here’s the complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ</title>
<style>
body {
font-family: 'Lato', sans-serif;
background-color: #fdfdfd;
margin: 0;
padding: 20px;
color: #333;
}
.faq-section {
background: #fdfdfd;
min-height: 100vh;
padding: 10vh 0 0;
}
.faq-title h2 {
position: relative;
margin-bottom: 45px;
display: inline-block;
font-weight: 600;
line-height: 1;
color: #333;
text-align: center;
width: 100%;
}
.faq-title h2::before {
content: "";
position: absolute;
left: 50%;
width: 60px;
height: 2px;
background: #E91E63;
bottom: -25px;
margin-left: -30px;
}
.faq {
max-width: 800px;
margin: 0 auto;
background: #FFFFFF;
box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
border-radius: 4px;
}
.faq .card {
border: none;
background: none;
border-bottom: 1px dashed #CEE1F8;
}
.faq .card .card-header {
padding: 0px;
border: none;
background: none;
transition: all 0.3s ease 0s;
}
.faq .card .card-header:hover {
background: rgba(233, 30, 99, 0.1);
padding-left: 10px;
}
.faq .card .card-header .faq-title {
width: 100%;
text-align: left;
padding: 0px 30px;
font-weight: 400;
font-size: 15px;
letter-spacing: 1px;
color: #3B566E;
text-decoration: none !important;
cursor: pointer;
padding-top: 20px;
padding-bottom: 20px;
}
.faq .card .card-header .faq-title .badge {
display: inline-block;
width: 20px;
height: 20px;
line-height: 14px;
float: left;
border-radius: 100px;
text-align: center;
background: #E91E63;
color: #fff;
font-size: 12px;
margin-right: 20px;
}
.faq .card .card-body {
padding: 30px 35px 16px;
font-weight: 400;
font-size: 16px;
color: #6F8BA4;
line-height: 28px;
letter-spacing: 1px;
border-top: 1px solid #F3F8FF;
display: none; /* Initially hide answers */
}
@media (max-width: 991px) {
.faq {
margin-bottom: 30px;
}
.faq .card .card-header .faq-title {
line-height: 26px;
margin-top: 10px;
}
}
</style>
</head>
<body>
<div class="faq-section">
<div class="faq-title">
<h2>FAQ Accordion</h2>
</div>
<div class="faq">
<div class="card">
<div class="card-header">
<div class="faq-title">
<span class="badge">1</span>
What services does IGT WEB Developers offer?
</div>
</div>
<div class="card-body">
<p>We offer a wide range of end-to-end website development services specifically designed to help you meet your goals.</p>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="faq-title">
<span class="badge">2</span>
How do IGT WEB Developers ensure quality in their web solutions?
</div>
</div>
<div class="card-body">
<p>Our website developers build custom web solutions and strictly follow business processes to ensure quality and reliability.</p>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="faq-title">
<span class="badge">3</span>
Where to find IGT WEB Developers on social media?
</div>
</div>
<div class="card-body">
<p>You can find us on Facebook and Instagram @igtwebdeveloper.</p>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="faq-title">
<span class="badge">4</span>
Why should I choose IGT WEB Developers for my project?
</div>
</div>
<div class="card-body">
<p>We are committed to delivering custom web solutions that meet your specific business needs, with a focus on quality and adherence to business processes.</p>
</div>
</div>
</div>
</div>
<script>
document.querySelectorAll(".card-header").forEach(FAQ_SHOW_AND_HIDE);
function FAQ_SHOW_AND_HIDE(question) {
question.addEventListener('click', function() {
var answer = question.nextElementSibling;
if (answer.style.display === 'block') {
console.log("I'm block");
answer.style.display = 'none';
} else {
document.querySelectorAll('.card-body').forEach(function(a) {
a.style.display = 'none';
});
answer.style.display = 'block';
}
});
}
</script>
</body>
</html>
CSS Explanation
Now, let’s move on to the CSS. First, we set some general styles for the body, such as font, background color, and padding.
We style the FAQ section to give it a clean and organized look. We add padding, background color, and set the minimum height. We style the FAQ title to make it stand out, centering the text and adding a line below it.
We style the main FAQ container to center it on the page, add a shadow, and round the corners. Each card has a dashed border at the bottom. We style the answer sections to be initially hidden and then displayed when the question is clicked. We use padding, font styles, and a top border to make the answers look good.
Finally, we add some responsive design rules to ensure the FAQ section looks good on smaller screens.
JavaScript Code Explanation
Step 1: Selecting Elements
document.querySelectorAll(".card-header");
This selects all elements with the class card-header and returns a NodeList of these elements.
Step 2: Adding Click Event Listener
header.addEventListener("click", function() { ... });
This adds a click event listener to each card-header element. When a card-header is clicked, the function inside will be executed.
Step 3: Getting the Corresponding Answer Element
var body = header.nextElementSibling;
This selects the next sibling element of the card-header, which is the card-body containing the answer.
Step 4: Toggling the Display of the Answer
if (body.style.display === "block") { ... }
This checks if the answer (card-body) is currently displayed (i.e., its display style is set to block).
body.style.display = "none";
If the answer is currently displayed, this line hides it by setting its display style to none.
Step 5: Hiding All Answers and Showing the Clicked One
document.querySelectorAll(".card-body").forEach(function(b) { ... });
This selects all elements with the class card-body and iterates over them to hide each answer.
b.style.display = "none";
This hides each answer by setting its display style to none.
body.style.display = "block";
Finally, this shows the clicked answer by setting its display style to block.
By combining these steps, we create an interactive FAQ section where clicking on a question toggles the display of the corresponding answer.
Conclusion
By following the steps and code provided in this article, you should now have a fully functional and stylish FAQ section for your website. This section not only enhances user experience but also helps in organizing information in an accessible manner. Feel free to customize the code to better fit your website’s style and requirements. Happy coding!
CLICK FOR COMPLETE TUTORIAL