FAQ or Frequently Asked Questions are very important page for any company website. The Frequently Asked Questions template content basically asked questions by users and their answer shortly.
In this article, I will going to explain step by step how to create FAQ template with Show and Hide Questions and Answers using Bootstrap 5 accordions. Previously I have created How to Create Accordion using bootstarp 5. This is very similar to that, but this article is especially for FAQ template Frequently Asked Questions. Basically, there are some question sections which is under <accordion-header> and the answer is under <aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <accordion-body> a plus icon on the right side when you will click on any question or icon then answers will appear
Read Also:
- Pricing Table Design Bootstrap 5?
- How to Display Content on hovering Card using CSS?
- How to create a Portfolio Gallery?
- FAQ Page with Show and Hide Questions and Answers?
- Bootstrap Team Section Design Download
- Bootstrap Carousel with Captions and Thumbnails Free Download
A simple and smooth FAQ template to show and hide questions and answers accordion component created using bootstrap CSS and HTML <accordion-item> <accordion-header> <accordion-collapse> elements.
This code is very simple, even a beginner can also understand very easily. So lets start. We need to the following library at our header section of index.html.
Steps to create Frequently Asked Questions with Show and Hide Questions and Answers
Bootstrap Library
|
1 2 3 |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> |
The HTML Code
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <div class="circle-icon"> <i class="fa fa-question"></i> </div> <span>How to Create FAQ Section</span> </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the first item's accordion body.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> </div> |
The CSS
The following CSS is used to design the Frequently Asked Questions accordion.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"); body { background: #fff; font-family: "Roboto", sans-serif; } .main-content { padding-top: 100px; padding-bottom: 100px; } .flex-center { align-items: center; } .accordion-button{ margin-bottom: 10px; } .accordion-body { margin-top: 15px; padding: 25px; background: #fff; border-radius: 5px; box-shadow: 0 2px 25px -3px rgba(0, 0, 0, 0.1); margin-bottom: 10px; } .circle-icon { height: 50px; width: 50px; border-radius: 50px; display: flex; justify-content: center; align-items: center; background: #2b4eff; border: 5px solid #b2bfff; color: #fff; margin-left: -20px; margin-right: 10px; transform: scale(1.2); } .accordion-item{ border: 0px!important; } .accordion-button:not(.collapsed){ border: 0px!important; color: #0c63e4; background-color: #ffffff; box-shadow: inset 0 0px 0 rgb(0 0 0 / 13%); } |
Full HTML Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FAQ UI Design</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link href="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" target="_blank" rel="noreferrer noopener">https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css</a>" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <section class="main-content"> <div class="container"> <h1 class="text-center text-uppercase mb-5">Frequently Asked Questions</h1> <br> <br> <div class="row flex-center"> <div class="col-sm-10 offset-sm-2"> <div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <div class="circle-icon"> <i class="fa fa-question"></i> </div> <span>How to Create FAQ Section</span> </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the first item's accordion body.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <div class="circle-icon"> <i class="fa fa-question"></i> </div> <span>What jQuery do I need?</span> </button> </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the second item's accordion body.</strong> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <div class="circle-icon"> <i class="fa fa-question"></i> </div> <span>HTML CSS FAQ Design With jQuery Accordion</span> </button> </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the third item's accordion body.</strong> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis </div> </div> </div> </div> </div> </div> </div> </section> <script src="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" target="_blank" rel="noreferrer noopener">https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js</a>" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </body> </html> |
Hope this article will help you to create the create Frequently Asked Questions Page with Show and Hide Questions and Answers so please like and share.
Live Demo and full source code link given below
Related Post
3 replies on “FAQ Page with Show and Hide Questions and Answers”
nice coding
nice work
superb!!!