How to use Accordion Component In Bootstrap
The 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/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> <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 w3wiki used for? </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>w3wiki</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 w3wiki? </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong> Sandeep Jain is the founder at w3wiki. </strong> He is an alumini of Indian Institute of Technology Roorkee. His platform w3wiki 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 w3wiki created? </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong> w3wiki was founded in 2009. </strong> Where is the global headquarters of w3wiki? Global headquarters for w3wiki is located in Noida, Uttar Pradesh,India. </div> </div> </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:
GIF of Accordion Component – Example 1
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