Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis non accumsan in, tempor dictum neque.
<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>