Collapse panel
Bootstrap 5 Collapse panel component
Responsive collapse panel built with Bootstrap 5. Create intuitive, user-friendly panels that expand and collapse for better content organization.
Basic example
Click the buttons below to show and hide another element via class changes:
.collapsehides content.collapsingis applied during transitions.collapse.showshows content
You can use a link with the href attribute, or a button with the
data-mdb-target attribute. In both cases, the
data-mdb-collapse-init is required.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
ea proident.
<!-- Buttons trigger collapse -->
<a
class="btn btn-primary mb-3"
data-mdb-collapse-init
data-mdb-ripple-init
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample"
>
Link with href
</a>
<button
class="btn btn-primary mb-3"
type="button"
data-mdb-collapse-init
data-mdb-ripple-init
data-mdb-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"
>
Button with data-mdb-target
</button>
<!-- Collapsed content -->
<div class="collapse" id="collapseExample">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident.
</div>
// Initialization for ES Users
import { Collapse, Ripple, initMDB } from 'mdb-ui-kit';
initMDB({ Collapse, Ripple });
Accordion example
Click the accordions below to expand/collapse the accordion content.
This is the first item's accordion body. It is shown by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML can go within
the
.accordion-body, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML can go within
the
.accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML can go within
the
.accordion-body, though the transition does limit overflow.
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button
data-mdb-collapse-init
class="accordion-button"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-mdb-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button
data-mdb-collapse-init
class="accordion-button collapsed"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-mdb-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to
style each element. These classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any of this with custom CSS
or overriding our default variables. It's also worth noting that just about any
HTML can go within the <strong>.accordion-body</strong>, though the transition
does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button
data-mdb-collapse-init
class="accordion-button collapsed"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-mdb-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
</div>
</div>
</div>
</div>
// Initialization for ES Users
import { Collapse, initMDB } from 'mdb-ui-kit';
initMDB({ Collapse });