Accordions
Standard
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="crazyAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button
class="accordion-button"
data-bs-toggle="collapse"
data-bs-target="#collapseOn"
type="button"
aria-expanded="true"
aria-controls="collapseOn">
<div class="d-flex flex-column justify-content-start">
<span class="title">Accordion Item #1</span>
<span class="sub">This accordion has some radio buttons!</span>
</div>
</button>
</h2>
<div
class="accordion-collapse collapse show"
id="collapseOn"
data-bs-parent="#crazyAccordion"
aria-labelledby="headingOne">
<div class="accordion-body">
<fieldset>
<legend></legend>
<form action="">
<div class="form-check">
<input
class="form-check-input"
id="myDefaultRadio"
name="flexRadioDefault"
type="radio" />
<label class="form-check-label" for="myDefaultRadio">
My default radio</label
>
</div>
<div class="form-check">
<input
class="form-check-input"
id="myDefaultChecked"
name="flexRadioDefault"
type="radio"
checked />
<label class="form-check-label" for="myDefaultChecked">
My default checked radio
</label>
</div>
</form>
</fieldset>
<button
class="btn accordion-close btn-sm"
data-bs-toggle="collapse"
data-bs-target="#collapseOn"
aria-expanded="false"
aria-controls="collapseOn">
Hide
</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button
class="accordion-button collapsed"
data-bs-toggle="collapse"
data-bs-target="#collapseTw"
type="button"
aria-expanded="false"
aria-controls="collapseTw">
<div class="d-flex flex-column justify-content-start">
<span class="title">Accordion Item #2</span>
<span class="sub">This accordion has a table!</span>
</div>
</button>
</h2>
<div
class="accordion-collapse collapse"
id="collapseTw"
data-bs-parent="#crazyAccordion"
aria-labelledby="headingTwo">
<div class="accordion-body">
<!-- Table Here -->
<button
class="btn accordion-close btn-sm"
data-bs-toggle="collapse"
data-bs-target="#collapseTw"
aria-expanded="false"
aria-controls="collapseTw">
Hide
</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button
class="accordion-button collapsed"
data-bs-toggle="collapse"
data-bs-target="#collapseThre"
type="button"
aria-expanded="false"
aria-controls="collapseThre">
<div class="d-flex flex-column justify-content-start">
<span class="title">Accordion Item #3</span>
<span class="sub">This accordion has some text from BS5.</span>
</div>
</button>
</h2>
<div
class="accordion-collapse collapse"
id="collapseThre"
data-bs-parent="#crazyAccordion"
aria-labelledby="headingThree">
<div class="accordion-body">
<p>
<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 <code>.accordion-body</code>, though the transition does
limit overflow.
</p>
<button
class="btn accordion-close btn-sm"
data-bs-toggle="collapse"
data-bs-target="#collapseThre"
aria-expanded="false"
aria-controls="collapseThre">
Hide
</button>
</div>
</div>
</div>
</div>Flush (without borders)
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.
<div class="accordion accordion-flush" id="accordionExample2"></div>Always Open
Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.
|
Status message: 'Verified'
Index
|
Given First Name
|
Last
|
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | tdornton |
| 3 | Larry | Bird |
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.
Filter variant
A filter variant is available. To use the filter variant add the .accordion-filter class to each .accordion-item.
Accordion 2 content.
Accordion 3 content.
<div class="accordion" id="accordion-1">
<div class="accordion-item accordion-filter">
<h2 class="accordion-header" id="heading-One">
<button
class="accordion-button collapsed"
data-bs-toggle="collapse"
data-bs-target="#collapse-One"
type="button"
aria-expanded="false"
aria-controls="collapse-One">
<div class="d-flex flex-column justify-content-start">
<span class="title">Accordion Label 1</span>
</div>
</button>
</h2>
<div
class="accordion-collapse collapse"
id="collapse-One"
aria-labelledby="heading-One">
<div class="accordion-body">
<div>
<ul class="filter-bar">
<li>
<div class="form-check">
<input
class="form-check-input"
id="data-release"
type="checkbox"
value="" />
<label class="form-check-label" for="data-release">
Data Releases</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
id="press-releases"
type="checkbox"
value="" />
<label class="form-check-label" for="press-releases">
Press Releases</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
id="webinars"
type="checkbox"
value="" />
<label class="form-check-label" for="webinars">Webinars</label>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
id="events"
type="checkbox"
value="" />
<label class="form-check-label" for="events">Events</label>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
id="blog"
type="checkbox"
value="" />
<label class="form-check-label" for="blog">Blog</label>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
id="data-resouce-blog"
type="checkbox"
value="" />
<label class="form-check-label" for="data-resouce-blog"
>Data Resource Guide</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
id="media-kit"
type="checkbox"
value="" />
<label class="form-check-label" for="media-kit"
>Media Kit</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
id="bulletin-newsletter"
type="checkbox"
value="" />
<label class="form-check-label" for="bulletin-newsletter"
>Bulletin Newsletter</label
>
</div>
</li>
<li>
<div class="form-check">
<input
class="form-check-input"
id="data-brunch-podcast"
type="checkbox"
value="" />
<label class="form-check-label" for="data-brunch-podcast"
>Data brunch podcast</label
>
</div>
</li>
</ul>
</div>
<button
class="btn accordion-close btn-sm"
data-bs-toggle="collapse"
data-bs-target="#collapse-One"
aria-expanded="false"
aria-controls="collapse-One">
Hide
</button>
</div>
</div>
</div>
<div class="accordion-item accordion-filter">
<h2 class="accordion-header" id="heading-Two">
<button
class="accordion-button collapsed"
data-bs-toggle="collapse"
data-bs-target="#collapse-Two"
type="button"
aria-expanded="false"
aria-controls="collapse-Two">
<span class="title">Accordion Label 2</span>
</button>
</h2>
<div
class="accordion-collapse collapse"
id="collapse-Two"
aria-labelledby="heading-Two">
<div class="accordion-body">
<p>Accordion 2 content.</p>
<button
class="btn accordion-close btn-sm"
data-bs-toggle="collapse"
data-bs-target="#collapse-Two"
aria-expanded="false"
aria-controls="collapse-Two">
Hide
</button>
</div>
</div>
</div>
<div class="accordion-item accordion-filter">
<h2 class="accordion-header" id="heading-Three">
<button
class="accordion-button collapsed"
data-bs-toggle="collapse"
data-bs-target="#collapse-Three"
type="button"
aria-expanded="false"
aria-controls="collapse-Three">
<span class="title">Accordion Label 3</span>
</button>
</h2>
<div
class="accordion-collapse collapse"
id="collapse-Three"
aria-labelledby="heading-Three">
<div class="accordion-body">
<p>Accordion 3 content.</p>
<button
class="btn accordion-close btn-sm"
data-bs-toggle="collapse"
data-bs-target="#collapse-Three"
aria-expanded="false"
aria-controls="collapse-Three">
Hide
</button>
</div>
</div>
</div>
</div>