|
An FAQ(Frequently Asked Questions) section serves as a valuable resource for users, providing them with the information they need in a convenient and accessible manner while also benefiting the organization by reducing support overhead and enhancing user satisfaction.
Using Accordion ComponentThe Accordion component organizes FAQ items into collapsible panels, allowing users to expand only the question they want to see the answer to. This approach conserves space and provides a neat user interface.
Example: The below code implements the bootstrap accordion to create a FAQ section on the web page.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>Accordion</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
crossorigin="anonymous" integrity=
"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN">
</head>
<body>
<div class=
"container rounded h-75 w-50 m-5 p-5 text-light bg-success">
<h1>FAQ</h1>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button"
type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
What is GeeksforGeeks used for?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>GeeksforGeeks</strong>
is a leading platform that provides computer science resources
and coding challenges for programmers and technology enthusiasts,
along with interview and exam preparations for upcoming aspirants.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
Who is the founder of GeeksforGeeks?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>
Sandeep Jain is the founder at GeeksforGeeks.
</strong>
He is an alumini of Indian Institute of Technology Roorkee.
His platform GeeksforGeeks is well recognized among all the
engineering students throughout all colleges in India.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed"
type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="false"
aria-controls="collapseThree">
When was GeeksforGeeks created?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>
GeeksForGeeks was founded in 2009.
</strong>
Where is the global headquarters of GeeksForGeeks?
Global headquarters for GeeksForGeeks is located in Noida,
Uttar Pradesh,India.
</div>
</div>
</div>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous">
</script>
</body>
</html>
Output:
Collapsible PanelsBootstrap’s collapsible panels offer a straightforward approach to presenting FAQ content. Each question serves as a trigger to reveal its corresponding answer when clicked, ensuring a clear and concise layout. The collapse JavaScript plugin is used to show and hide content.
Example: The below code implements the collapsible panels to create FAQ section using Boorstrap.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Collapsible Panels</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
crossorigin="anonymous" integrity=
"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN">
</head>
<body>
<div class=
"container rounded h-75 w-50 m-5 p-5 text-light bg-success">
<h1>FAQ</h1>
<p class="d-inline-flex gap-1 ">
<a class="btn btn-primary" data-bs-toggle="collapse"
href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
What is Programming
</a>
<button class="btn btn-primary" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
Check
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body text-black">
Programming is the process of writing code to tell a
computer how to perform tasks. It involves humans
working with computers to create instructions in a
language that computers can understand.
</div>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous">
</script>
</body>
</html>
Output:
Card-Based LayoutUtilizing Bootstrap’s card component, you can create an aesthetically pleasing FAQ section where each question and answer pair is presented within a distinct card. This approach offers flexibility in design and customization.
Example: The below code example is a practical implementation of Card layout to create a FAQ section.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card-Based Layout</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
crossorigin="anonymous" integrity=
"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN">
</head>
<body>
<div class=
"container rounded h-75 w-25 m-5 p-5 text-light bg-success">
<h1>FAQ</h1>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">What is UPI?</h5>
<p class="card-text">
Unified Payments Interface (UPI) is a real-time payment
system that allows users to send and receive money from
one bank account to another instantly and for free.
</p>
<a href="#" class="card-link">Read More</a>
<a href="#" class="card-link">Website</a>
</div>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous">
</script>
</body>
</html>
Output:
|
