Hey DNN Community, "I’m back with my latest blog on creating a Stylish FAQ Section with Bootstrap! FAQs (Frequently Asked Questions) are a great way to address common queries and provide information to users quickly. In this blog, we’ll create a stylish and responsive FAQ section using Bootstrap, Font Awesome, and a bit of custom CSS and JavaScript.
Final look: Here is the final look of FAQ.
Final look: Here is the final look of FAQ in mobile and all devices.
Step 1: Set Up the HTML Structure: Here’s the basic HTML structure for our FAQ section.
><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap FAQ Section</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome for Icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-5 faq-container">
<h2 class="text-center mb-4">Frequently Asked Questions</h2>
<div id="faqAccordion">
<div class="card">
<div class="card-header collapsed d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<span>What is the return policy?</span>
<i class="fa fa-plus"></i>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#faqAccordion">
<div class="card-body">
Our return policy allows returns within 30 days of purchase. Please ensure the item is in its original condition.
</div>
</div>
</div>
<div class="card">
<div class="card-header collapsed d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span>How long does shipping take?</span>
<i class="fa fa-plus"></i>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#faqAccordion">
<div class="card-body">
Shipping typically takes 5-7 business days, depending on your location.
</div>
</div>
</div>
<div class="card">
<div class="card-header collapsed d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<span>How can I track my order?</span>
<i class="fa fa-plus"></i>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#faqAccordion">
<div class="card-body">
You can track your order using the tracking number provided in your shipping confirmation email.
</div>
</div>
</div>
</div>
</div>
Step 2: Add Bootstrap and Font Awesome: In the <head> section, we link to Bootstrap and Font Awesome. Bootstrap helps us with styling, and Font Awesome provides icons for our FAQ section.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
Step 3: Style the FAQ Section: We add some custom styles to make our FAQ section look nice. This includes a shadow effect for the container, padding, and a background color. We also add styles for the icons that will rotate when the FAQ items are expanded or collapsed.
<style>
.faq-container {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
padding: 2rem;
border-radius: 8px;
background-color: #fff;
}
.card-header {
cursor: pointer;
}
.card-header i {
transition: transform 0.2s;
}
.card-header.collapsed i {
transform: rotate(0deg);
}
.card-header:not(.collapsed) i {
transform: rotate(45deg);
}
</style>
Step 4: Create FAQ Items: Each FAQ item is a Bootstrap card. We use the data-toggle and data-target attributes to control the collapse behavior. The icons (fa-plus and fa-minus) will change depending on whether the FAQ is expanded or collapsed.
<div class="card">
<div class="card-header collapsed d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<span>What is the return policy?</span>
<i class="fa fa-plus"></i>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#faqAccordion">
<div class="card-body">
Our return policy allows returns within 30 days of purchase. Please ensure the item is in its original condition.
</div>
</div>
</div>
Step 5: Add JavaScript for Interactivity: We use jQuery to handle the icon rotation when FAQ items are expanded or collapsed. This JavaScript code ensures the icons are updated correctly based on the current state of the FAQ items.
<script>
$('#faqAccordion .card-header').on('click', function() {
const isCollapsed = $(this).hasClass('collapsed');
$('#faqAccordion .card-header').addClass('collapsed').find('i').removeClass('fa-minus').addClass('fa-plus');
if (!isCollapsed) {
$(this).find('i').removeClass('fa-plus').addClass('fa-minus');
} else {
$(this).find('i').removeClass('fa-minus').addClass('fa-plus');
}
});
$('#faqAccordion .collapse').each(function() {
const header = $(this).prev('.card-header');
if ($(this).hasClass('show')) {
header.find('i').removeClass('fa-plus').addClass('fa-minus');
header.removeClass('collapsed');
} else {
header.find('i').removeClass('fa-minus').addClass('fa-plus');
header.addClass('collapsed');
}
});
</script>
Conclusion: And there you have it—a stylish, responsive FAQ section using Bootstrap. This setup not only looks great but also functions smoothly with a nice toggle effect for the FAQ items. Feel free to customize it further to match your site's design! Thank for reading, Stay tuned for such interesting blogs in future with SightSpeak AI.