Accordion
Overview
Our Accordion uses Bootstrap's basic accordion component but with one difference. Our accordion will expand/collapse when the user clicks the radio button inputs.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi maiores est ex nisi sapiente suscipit pariatur blanditiis, mollitia explicabo incidunt, illo repellendus, neque in nemo qui cupiditate assumenda aut ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, quia aliquid, quibusdam quis, accusamus quos minus laudantium fuga dolorum praesentium maxime ut recusandae in molestiae animi veniam magnam officia vel.
<!-- Accordion -->
<div class="border rounded-3 px-4 py-3">
<div class="accordion" id="accordExample">
<!-- Accordion Item One -->
<div class="accordion-item border-0">
<div class="accordion-header">
<div class="form-check">
<input id="accordExample1" class="form-check-input collapsed checked"
type="radio" name="accordExample" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="false"
aria-controls="collapseOne" checked>
<label class="form-check-label" for="accordExample1"
data-bs-parent="#accordExample">
<b>Accordion One</b>
</label>
</div>
</div>
<div id="collapseOne" class="accordion-collapse collapse show my-3"
data-bs-parent="#accordExample">
<div class="accordion-body p-0">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi maiores
est
ex nisi sapiente suscipit pariatur blanditiis, mollitia explicabo
incidunt, illo repellendus, neque in nemo qui cupiditate assumenda
aut
ut.</p>
</div>
</div>
</div>
<!-- Accordion Item Two -->
<div class="accordion-item border-0 mt-3 border-top">
<div class="accordion-header mt-3">
<div class="form-check">
<input id="accordExample2" class="form-check-input collapsed"
type="radio" name="accordExample" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false"
aria-controls="collapseTwo">
<label class="form-check-label" for="accordExample2"
data-bs-parent="#accordExample">
<b>Accordion Two</b>
</label>
</div>
</div>
<div id="collapseTwo" class="accordion-collapse collapse"
data-bs-parent="#accordExample">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, quia
aliquid, quibusdam quis, accusamus quos minus laudantium fuga dolorum
praesentium maxime ut recusandae in molestiae animi veniam magnam
officia
vel.</p>
</div>
</div>
</div>
</div>