→ Prajwal Hallale
→ FAQ accordion

FAQ accordion

The accordion component is a vertically stacked set of items

This bootstrap css example is contributed by Prajwal Hallale, on 18-Mar-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Frequently asked questions, QnA,collapsible

Tags: FAQ Accordion

Author Prajwal Hallale

3.1k

v.5.3

Fork Fullscreen

<div class="accordion accordion-flush mx-auto border rounded" id="faqAccordion" style="max-width:600px;">
  <div class="accordion-item">
    <h2 class="accordion-header" id="faqHeading1">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse1" aria-expanded="true" aria-controls="faqCollapse1">
        <span class="me-2 text-primary">
          <i class="bi bi-question-circle-fill"></i>
        </span>
        What is the return policy?
      </button>
    </h2>
    <div id="faqCollapse1" class="accordion-collapse collapse show" aria-labelledby="faqHeading1" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        You can return most items within 30 days of delivery for a full refund. Some exceptions may apply, please refer to our full return policy for more details.
      </div>
    </div>
  </div>

<div class="accordion-item">
    <h2 class="accordion-header" id="faqHeading2">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse2" aria-expanded="false" aria-controls="faqCollapse2">
        <span class="me-2 text-primary">
          <i class="bi bi-question-circle-fill"></i>
        </span>
        How do I track my order?
      </button>
    </h2>
    <div id="faqCollapse2" class="accordion-collapse collapse" aria-labelledby="faqHeading2" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        You can track your order by visiting the "Order Tracking" page on our website and entering your order number and email address.
      </div>
    </div>
  </div>

<div class="accordion-item">
    <h2 class="accordion-header" id="faqHeading3">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse3" aria-expanded="false" aria-controls="faqCollapse3">
        <span class="me-2 text-primary">
          <i class="bi bi-question-circle-fill"></i>
        </span>
        Do you offer international shipping?
      </button>
    </h2>
    <div id="faqCollapse3" class="accordion-collapse collapse" aria-labelledby="faqHeading3" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Yes, we offer international shipping to most countries around the world. Shipping rates and delivery times may vary depending on your location.
      </div>
    </div>
  </div>

<div class="accordion-item">
    <h2 class="accordion-header" id="faqHeading4">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse4" aria-expanded="false" aria-controls="faqCollapse4">
        <span class="me-2 text-primary">
          <i class="bi bi-question-circle-fill"></i>
        </span>
        How do I contact customer support?
      </button>
    </h2>
    <div id="faqCollapse4" class="accordion-collapse collapse" aria-labelledby="faqHeading4" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        You can contact our customer support team by email at support@example.com or by phone at 555-123-4567 during regular business hours.
      </div>
    </div>
  </div>
</div>

More Examples

Accordion FAQ section
Minimal and with beautiful animation

Author:
Ankit khedkar

11 months ago

5.4k

v.5.3
Beautiful Bootstrap Accordion

Author:
Alaric Sloane

7 months ago

3k

v.5.3
Bootstrap 5.3 Accordion
Modern Bootstrap 5.3 Accordion

Author:
Prajwal Hallale

6 months ago

2k

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Ankit khedkar

11 months ago

6k

v.5.3
FAQ example with bootstrap 4
Simple Frequently Asked Questions section

Author:
Moana silva

11 months ago

1.9k

v.4.6
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Anonymous

4 months ago

1.6k

v.5.3
Accordion example with Bootstrap 5.3

Author:
Ankit khedkar

11 months ago

4.1k

v.5.3
Search section

Author:
Ankit khedkar

7 months ago

1.3k

v.5.3
Rating section
Rating section fit form for taking user ratings and reviews

Author:
Tane Mahuta

11 months ago

1.6k

v.5.3
Login Form with input field validation, and display error or success messages using only HTML, CSS, and Bootstrap, you can follow this approach.
HTML: Form Structure: Contains fields for username and password with validation attributes (required, minlength). Feedback Messages: Placeholder div for dynamic error messages. CSS: Background Gradient: Applied to the body. Card Styling: Rounded corners and centered layout. Button Styling: Custom colors for the submit button. Validation Styling: Borders and error message styling. JavaScript: Validation Logic: Basic client-side validation to check if fields are empty or meet minimum length requirements. Feedback Messages: Display appropriate error or success messages based on validation.

Author:
zobaidul kaziex

9 months ago

5.1k

v.4.6
Beautiful Pricing Cards

Author:
Anonymous

8 months ago

984

v.5.3
Basic Breadcrumb

Author:
Mateo Rojas

6 months ago

573

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent