Collapsible Panels
Bootstrap’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/bootstrap@5.3.2/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/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin = "anonymous" > </ script > </ body > </ html > |
Output:
How to create a FAQ Section in Bootstrap ?
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.
Table of Content
- Using Accordion Component
- Collapsible Panels
- Card-Based Layout
Contact Us