Overview
Requires JavaScript Component
Usage
The collapse JavaScript plugin is used to show and hide content. It utilizes a few classes to handle the heavy lifting:
.collapse
hides the content
.collapse.show
shows the content
.collapsing
is added when the transition starts, and removed when it finishes
Via Data Attributes
Just add data-toggle="collapse"
and a data-target
to the element to
automatically assign control of one or more collapsible elements. The
data-target
attribute accepts a CSS selector to apply the collapse to. Be sure to add
the class collapse to the collapsible element. If you’d like it to default open, add the
additional class show
.
To add accordion-like group management to a collapsible area, add the data attribute
data-parent="#selector"
.
Examples
Use the .accordion
class in combination with .card
elements to create
collapsible elements that apply appropriate styling.
Collapsible Cards
Collapsible Group Item #1
Collapsible Group Item #2
Collapsible Group Item #3
<div class="accordion" id="accordionCodeExample">
<div class="card">
<div class="card-header" role="button" id="accordionHeadingOne" data-toggle="collapse" data-target="#codeCollapseOne" aria-expanded="true" aria-controls="codeCollapseOne">
<h6 class="mb-0" id="collapsible-group-item-1">
Collapsible Group Item #1</h6>
</div>
<div id="codeCollapseOne" class="collapse show" aria-labelledby="accordionHeadingOne" data-parent="#accordionCodeExample">
<div class="card-body">
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.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="button" id="accordionHeadingTwo" data-toggle="collapse" data-target="#codeCollapseTwo" aria-expanded="false" aria-controls="codeCollapseTwo">
<h6 class="mb-0" id="collapsible-group-item-2">
Collapsible Group Item #2</h6>
</div>
<div id="codeCollapseTwo" class="collapse" aria-labelledby="accordionHeadingTwo" data-parent="#accordionCodeExample">
<div class="card-body">
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.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="button" id="accordionHeadingThree" data-toggle="collapse" data-target="#codeCollapseThree" aria-expanded="false" aria-controls="codeCollapseThree">
<h6 class="mb-0" id="collapsible-group-item-3">
Collapsible Group Item #3</h6>
</div>
<div id="codeCollapseThree" class="collapse" aria-labelledby="accordionHeadingThree" data-parent="#accordionCodeExample">
<div class="card-body">
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.
</div>
</div>
</div>
</div>
Compact Variant
Add the .accordion-sm
class to .accordion
to create a smaller variant.
Collapsible Group Item #1
Collapsible Group Item #2
Collapsible Group Item #3
Collapsible Lists
You can use the .accordion
classes in combination with other UI Elements to create collapsible content.
- List Item
- List Item
-
Collapsible List Item
Anim cliche, high life accusamus terry richardson ad squid. 3 wolf moon official, non cupidatat skateboard dolor brunch. Food truck quinoa. Brunch 3 wolf moon temper, sun aliqua put a bird on it squid single-origin coffee null assume shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred sap ea president. Ad vegan excepteur butcher vice. Leggings craft beer farm-to-table, raw denim aesthetic synth you probably haven't heard of them accusamus labore sustainable VHS. - List Item
- List Item
<ul class="list-group">
<li class="list-group-item">List Item</li>
<li class="list-group-item">List Item</li>
<li class="list-group-item py-0">
<div class="accordion borderless w-100" id="listAccordion">
<div class="card">
<div class="card-header px-0" role="button" id="listAccordionHeading" data-toggle="collapse" data-target="#listAccordionOne" aria-expanded="false" aria-controls="listAccordionOne">
<h6 class="mb-0" id="collapsible-list-item">
Collapsible List Item</h6>
</div>
<div id="listAccordionOne" class="collapse" aria-labelledby="listAccordionHeading" data-parent="#listAccordion">
<div class="card-body">
Anim cliche, high life accusamus terry
richardson ad squid. 3 wolf moon official, non cupidatat skateboard dolor
brunch. Food truck quinoa. Brunch 3 wolf moon temper, sun
aliqua put a bird on it squid single-origin coffee null assume shoreditch et.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred sap
ea president. Ad vegan excepteur butcher vice. Leggings craft beer
farm-to-table, raw denim aesthetic synth you probably haven't heard of them
accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">List Item</li>
<li class="list-group-item">List Item</li>
</ul>
Mutually Exclusive Collapse
To have your collapsible elements operate mutually exclusively, simply remove the data-parent
attribute from each collapsible item.