→ Ankit khedkar
→ Accordion FAQ section

Accordion FAQ section

Minimal and with beautiful animation

This bootstrap css example is contributed by Ankit khedkar, on 24-Jul-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 Ankit khedkar

v.5.3

Fork Fullscreen

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h2 class="mb-4">Frequently Asked Questions</h2>
            <div class="accordion" id="faqAccordion">
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="true" aria-controls="faq1">
                                What is your return policy?
                            </button>
                    </h2>
                    <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            We offer a 30-day return policy for all unused items in their original packaging.
                        </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="#faq2" aria-expanded="false" aria-controls="faq2">
                                How long does shipping take?
                            </button>
                    </h2>
                    <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Shipping typically takes 3-5 business days for domestic orders and 7-14 days for
                            international orders.
                        </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="#faq3" aria-expanded="false" aria-controls="faq3">
                                Do you offer international shipping?
                            </button>
                    </h2>
                    <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Yes, we ship to most countries worldwide. Shipping costs and delivery times may vary
                            depending on the destination.
                        </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="#faq4" aria-expanded="false" aria-controls="faq4">
                                How can I track my order?
                            </button>
                    </h2>
                    <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Once your order ships, you'll receive a tracking number via email. You can use this
                            number to track your package on our website or the carrier's site.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

FAQ accordion
The accordion component is a vertically stacked set of items

Author:
Prajwal Hallale

1 year ago

5.2k

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

Author:
Moana silva

1 year ago

3.8k

v.4.6
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Ankit khedkar

1 year ago

9.1k

v.5.3
Beautiful Bootstrap Accordion

Author:
Alaric Sloane

1 year ago

4.3k

v.5.3
Accordion example with Bootstrap 5.3

Author:
Ankit khedkar

1 year ago

5.7k

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Anonymous

1 year ago

2.9k

v.5.3
FAQ #1

Author:
java stories story

6 months ago

1.1k

v.5.3
Bootstrap 5.3 Accordion
Modern Bootstrap 5.3 Accordion

Author:
Prajwal Hallale

1 year ago

3.2k

v.5.3
Blog post layout
Minimal and clean blog post layout

Author:
Juniper

1 year ago

3.7k

v.5.3
User Profile Card with Bootstrap
How to Use: Replace Image URL: Update the src attribute of the img tag to the actual URL of the user’s image. Update Text: Change the text inside the h5 and p elements to reflect the user’s actual name and biography

Author:
zobaidul kaziex

1 year ago

2.6k

v.4.6
Credit cards bootstrap 5
credit cards design made with Bootstrap 5

Author:
Ankit khedkar

1 year ago

3.2k

v.5.3
Bootstrap Footer example
dark footer

Author:
Anonymous

1 year ago

4.1k

v.3.4

Didn't find component you were looking for?

Search from 300+ componenent