Accordions
Standard with Title
Omit the data-bs-parent
attribute on each .accordion-collapse
to make accordion items stay open when another item is opened.
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.
<script>
document.addEventListener("DOMContentLoaded", function () {
const toggleButtons = document.querySelectorAll(".toggleAccordions");
toggleButtons.forEach((button) => {
const targetId = button.getAttribute("data-target");
const accordionGroup = document.getElementById(targetId);
const accordions = accordionGroup.querySelectorAll(".accordion-collapse");
let areAllExpanded = false;
button.addEventListener("click", function () {
if (!areAllExpanded) {
// Expand all panels within the targeted accordion group
accordions.forEach((accordion) => {
if (!accordion.classList.contains("show")) {
bootstrap.Collapse.getOrCreateInstance(accordion).show();
}
});
button.textContent = "Collapse All";
areAllExpanded = true;
} else {
// Collapse all panels within the targeted accordion group
accordions.forEach((accordion) => {
if (accordion.classList.contains("show")) {
bootstrap.Collapse.getOrCreateInstance(accordion).hide();
}
});
button.textContent = "Expand All";
areAllExpanded = false;
}
});
});
});
</script>
<div class="accordion-group-title">
This is a title for an accordion group with a long title to show how it wraps
Lorem ipsum dolor sit amet consectetur adipiscing elit Quisq
</div>
<div class="text-end">
<button class="toggleAccordions btn btn-link" data-target="crazyAccordion">
Expand All
</button>
</div>
<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"
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"
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"
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)
adding the class .accordion-flush
to the accordion will remove the
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.
<button class="toggleAccordions btn btn-link mb-2" data-target="accordionExample2">Expand All</button>
<div class="accordion accordion-flush" id="accordionExample2"></div>
Only One Open at a Time
Add the data-bs-parent
attribute on each .accordion-collapse
to make accordion items close when another item is opened. Please note that
because of the addition of the data-bs-parent
the expand all / close
all button is not needed. You can not over ride having only one open when the
data-bs-parents is there.
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-group-title">
Accordion Group Title for One Open at a Time
</div>
<div class="accordion" id="accordionExample1">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button
class="accordion-button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
type="button"
aria-expanded="true"
aria-controls="collapseOne">
<div class="d-flex flex-column justify-content-start">
<span class="title">Accordion Item #1</span>
<span class="sub">Some subtext can go here.</span>
</div>
</button>
</h2>
<div
class="accordion-collapse collapse show"
id="collapseOne"
data-bs-parent="#accordionExample1"
aria-labelledby="headingOne">
<div class="accordion-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. It's also worth
noting that just about any HTML can go within the .accordion-body,
though the transition does limit overflow.
<button
class="btn accordion-close btn-sm"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
data-bs-parent="#accordionExample1"
aria-expanded="false"
aria-controls="collapseOne">
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="#collapseTwo"
type="button"
aria-expanded="false"
aria-controls="collapseTwo">
<span class="title">Accordion Item #2</span>
</button>
</h2>
<div
class="accordion-collapse collapse"
id="collapseTwo"
data-bs-parent="#accordionExample1"
aria-labelledby="headingTwo">
<div class="accordion-body">
<p>
<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 <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="#collapseTwo"
data-bs-parent="#accordionExample1"
aria-expanded="false"
aria-controls="collapseTwo">
Hide
</button>
</div>
</div>
</div>
</div>
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>
Handling Expand / Close all
To help users search a page we are adding an Expand/Close All button to each
accordion. Please note that you'll need to target each accordion group. The
variable accordionGroup
in the code below is the ID of the accordion
group and will make it so only that specific accordion opens.
<script>
document.addEventListener("DOMContentLoaded", function () {
const toggleButtons = document.querySelectorAll(".toggleAccordions");
toggleButtons.forEach((button) => {
const targetId = button.getAttribute("data-target");
const accordionGroup = document.getElementById(targetId);
const accordions = accordionGroup.querySelectorAll(".accordion-collapse");
function updateButtonState() {
// Check if all accordion items in this group are open
const allOpen = Array.from(accordions).every((accordion) => accordion.classList.contains("show"));
button.textContent = allOpen ? "Close All" : "Expand All";
}
button.addEventListener("click", function () {
const allOpenInitially = Array.from(accordions).every(accordion => accordion.classList.contains("show"));
// Toggle all accordions based on the initial open state
if (allOpenInitially) {
accordions.forEach((accordion) => {
if (accordion.classList.contains("show")) {
bootstrap.Collapse.getOrCreateInstance(accordion).hide();
}
});
} else {
accordions.forEach((accordion) => {
if (!accordion.classList.contains("show")) {
bootstrap.Collapse.getOrCreateInstance(accordion).show();
}
});
}
// Update the button state after the toggle action
updateButtonState();
});
// Attach event listeners to compute the button state whenever an accordion is toggled
accordions.forEach((accordion) => {
accordion.addEventListener('shown.bs.collapse', updateButtonState);
accordion.addEventListener('hidden.bs.collapse', updateButtonState);
});
// Set initial button text based on current state
updateButtonState();
});
});
</script>