The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height
from its current value to 0
. Given how CSS handles animations, you cannot use padding
on a .collapse
element. Instead, use the class as an independent wrapping element.
You can use a link with the href
attribute, or a button with the data-target
attribute. In both cases, the data-toggle="collapse"
is required.
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Panel One <i class="fas fa-chevron-down"></i></button>
</h2><!-- / accordion-header -->
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur, nunc dolor bibendum eros, eu suscipit nisl elit in arcu vulputate.
</div><!-- / accordion-body -->
</div><!-- / collapse -->
</div><!-- / accordion-item -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Panel Two <i class="fas fa-chevron-down"></i></button>
</h2><!-- / accordion-header -->
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur, nunc dolor bibendum eros, eu suscipit nisl elit in arcu vulputate.
</div><!-- / accordion-body -->
</div><!-- / collapse -->
</div><!-- / accordion-item -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Panel Three <i class="fas fa-chevron-down"></i></button>
</h2><!-- / accordion-header -->
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur, nunc dolor bibendum eros, eu suscipit nisl elit in arcu vulputate.
</div><!-- / accordion-body -->
</div><!-- / collapse -->
</div><!-- / accordion-item -->
</div><!-- / accordion -->
<div class="accordion minimal-accordion" id="minimal-accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="minimal-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#minimal-collapseOne" aria-expanded="true" aria-controls="minimal-collapseOne">Panel One <span><i class="fas fa-chevron-down"></i></span></button>
</h2><!-- / accordion-header -->
<div id="minimal-collapseOne" class="accordion-collapse collapse show" aria-labelledby="minimal-headingOne" data-bs-parent="#minimal-accordionExample">
<div class="accordion-body">
Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur.
</div><!-- / accordion-body -->
</div><!-- / collapse -->
</div><!-- / accordion-item -->
<div class="accordion-item">
<h2 class="accordion-header" id="minimal-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#minimal-collapseTwo" aria-expanded="false" aria-controls="minimal-collapseTwo">Panel Two <span><i class="fas fa-chevron-down"></i></span></button>
</h2><!-- / accordion-header -->
<div id="minimal-collapseTwo" class="accordion-collapse collapse" aria-labelledby="minimal-headingTwo" data-bs-parent="#minimal-accordionExample">
<div class="accordion-body">
Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur.
</div><!-- / accordion-body -->
</div><!-- / collapse -->
</div><!-- / accordion-item -->
<div class="accordion-item">
<h2 class="accordion-header" id="minimal-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#minimal-collapseThree" aria-expanded="false" aria-controls="minimal-collapseThree">Panel Three <span><i class="fas fa-chevron-down"></i></span></button>
</h2><!-- / accordion-header -->
<div id="minimal-collapseThree" class="accordion-collapse collapse" aria-labelledby="minimal-headingThree" data-bs-parent="#minimal-accordionExample">
<div class="accordion-body">
Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur.
</div><!-- / accordion-body -->
</div><!-- / collapse -->
</div><!-- / accordion-item -->
</div><!-- / minimal-accordion -->