→ 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

1.3k

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

9 months ago

1.2k

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

Author:
Moana silva

5 months ago

390

v.4.6
Bootstrap 5.3 Accordion
Modern Bootstrap 5.3 Accordion

Author:
Prajwal Hallale

3 weeks ago

164

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Ankit khedkar

5 months ago

1.7k

v.5.3
Accordion example with Bootstrap 5.3

Author:
Ankit khedkar

5 months ago

1.5k

v.5.3
Beautiful Bootstrap Accordion

Author:
Alaric Sloane

2 months ago

824

v.5.3
Beautiful Bootstrap Accordion

Author:
Alaric Sloane

2 months ago

824

v.5.3
Simple login form

Author:
Prajwal Hallale

9 months ago

2.9k

v.4.6
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

4 months ago

287

v.4.6
Music Player
Working music player With start top buttons and progress bar

Author:
Prajwal Hallale

5 months ago

1.5k

v.5.3
Shopping cart design using Bootstrap 5
With order summary and promo code form

Author:
Kemaya m

5 months ago

2.6k

v.5.3
Responsive blog home layout

Author:
Juniper

2 months ago

1.1k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent