Accordion

Quickly get a project started with any of our examples of Bootstrap 5 Accordion Snippet.

Flush

Need to Know

Frequently Asked Questions.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis non accumsan in, tempor dictum neque.

Create beautiful website with this Geeks UI template. Get started building a site today.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-flush" id="accordionExample">
 <div class="border-bottom py-3" id="headingOne">
    <h3 class="mb-0 fw-bold">
       <a href="#" class="d-flex align-items-center text-inherit text-decoration-none" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
       <span class="me-auto">
       What is the cost of an online course
       </span>
       <span class="collapse-toggle ms-4">
       <i class="fe fe-plus text-primary"></i>
       </span>
       </a>
    </h3>
 </div>
 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
    <div class="py-3 fs-4">
       Create beautiful website with this Geeks UI template. Get started building a site today.
    </div>
 </div>
 <!-- Card  -->
 <!-- Card header  -->
 <div class="border-bottom py-3" id="headingTwo">
    <h3 class="mb-0 fw-bold">
       <a href="#" class="d-flex align-items-center text-inherit text-decoration-none" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
       <span class="me-auto">
       What do I need to take a course?
       </span>
       <span class="collapse-toggle ms-4">
       <i class="fe fe-plus text-primary"></i>
       </span>
       </a>
    </h3>
 </div>
 <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
    <div class="py-3 fs-4">
       Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
       nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
 </div>
 <!-- Card  -->
 <!-- Card header  -->
 <div class="border-bottom py-3 " id="headingThree">
    <h3 class="mb-0 fw-bold">
       <a href="#" class="d-flex align-items-center text-inherit text-decoration-none" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
       <span class="me-auto">
       What do I receive for taking this course?
       </span>
       <span class="collapse-toggle ms-4">
       <i class="fe fe-plus text-primary"></i>
       </span>
       </a>
    </h3>
 </div>
 <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
    <div class="py-3 fs-4">
       Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
       squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
       quinoa nesciunt laborum eiusmod.
    </div>
 </div>
 <!-- Card  -->
 <!-- Card header  -->
 <div class="pt-3 " id="headingFour">
    <h3 class="mb-0 fw-bold">
       <a href="#" class="d-flex align-items-center text-inherit text-decoration-none" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
       <span class="me-auto">
       What willI get if I subscribe to this Certificate?
       </span>
       <span class="collapse-toggle ms-4">
       <i class="fe fe-plus text-primary"></i>
       </span>
       </a>
    </h3>
 </div>
 <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
    <div class="py-3 fs-4">
       Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
       squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
    </div>
 </div>
 <div class="mt-10 text-center">
    <a href="#" class="btn btn-outline-white">More questions? Visit the <span class="text-primary">Learner Help
    Center.</span></a>
 </div>