→ 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

9.6k

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

2 years ago

5.5k

v.5.3
FAQ #1

Author:
java stories story

8 months ago

1.2k

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Anonymous

1 year ago

3.2k

v.5.3
Bootstrap 5.3 Accordion
Modern Bootstrap 5.3 Accordion

Author:
Prajwal Hallale

1 year ago

3.5k

v.5.3
Beautiful Bootstrap Accordion

Author:
Alaric Sloane

1 year ago

4.5k

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Ankit khedkar

1 year ago

9.7k

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

Author:
Moana silva

1 year ago

4k

v.4.6
Accordion example with Bootstrap 5.3

Author:
Ankit khedkar

1 year ago

5.9k

v.5.3
Bootstrap homepage with background color, hover effects, animations, and shadows added to enhance the design
Features Added: Background Gradient: A smooth gradient background using linear-gradient. Card Shadow and Hover Effect: The card now lifts up with a shadow (box-shadow) and smooth transition (transform) on hover. Button Customization: A custom round button with hover color change. Animation: The card content animates with a "fade-in-up" effect using keyframe animation.

Author:
zobaidul kaziex

1 year ago

3.3k

v.4.6
Navbar Specials
Navbar with special design

Author:
almounkez

1 year ago

2.4k

v.5.3
Simple toast messages example
Four different types of toasts: Success (green) Error (red) Warning (yellow) Info (blue) Auto-dismisses after 3 seconds

Author:
Ankit khedkar

1 year ago

2.2k

v.5.3
Tabs example
Beautiful custom tabs example with Bootstrap 5

Author:
Omar Khaled

1 year ago

3.9k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent