Components menu
Accordion
An accordion is a list of collapsed content items. A user can expand any item in the list to view its contents.
About this component
An accordion is made up of in-page links. When one of the links is clicked, the link will expand an associated panel to reveal its contents. If the same link is clicked again, the panel’s contents will collapse and be hidden once again.
An accordion cannot be nested inside another accordion.
Why we use this component
Sometimes, content is displayed best when it’s broken into small chunks, with users able to pick the particular chunk they need from a longer list of accordion options. When thinking about using an accordion it should be tested with users, alongside other options, to find the best way to display an individual item of 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 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 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.
Heading
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 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 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.
HTML
<div class="accordion" id="accordion-NAME">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne-NAME">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne-NAME" aria-expanded="false" aria-controls="collapseOne-NAME"> Accordion Item #1 </button>
</h2>
<div id="collapseOne-NAME" class="accordion-collapse collapse" aria-labelledby="headingOne-NAME" data-bs-parent="#accordion-NAME" role="region">
<div class="accordion-body">
</div> <!-- /accordion-body -->
</div>
</div> <!-- /accordion item -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo-NAME">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo-NAME" aria-expanded="false" aria-controls="collapseTwo-NAME"> Accordion Item #2 </button>
</h2>
<div id="collapseTwo-NAME" class="accordion-collapse collapse" aria-labelledby="headingTwo-NAME" data-bs-parent="#accordion-NAME" role="region">
<div class="accordion-body">
</div ><!-- /accordion-body -->
</div>
</div> <!-- /accordion item -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree-NAME">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree-NAME" aria-expanded="false" aria-controls="collapseThree-NAME"> Accordion Item #3 </button>
</h2>
<div id="collapseThree-NAME" class="accordion-collapse collapse" aria-labelledby="headingThree-NAME" data-bs-parent="#accordion-NAME" role="region">
<div class="accordion-body">
</div ><!-- /accordion-body -->
</div >
</div ><!-- /accordion item -->
</div> <!-- /accordion -->
<h2> Heading </h2>
<div class="accordion" id="accordion-NAME">
<div class="accordion-item">
<h3 class="accordion-header" id="headingOne-NAME">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne-NAME" aria-expanded="false" aria-controls="collapseOne-NAME"> Accordion Item #1 </button>
</h3>
<div id="collapseOne-NAME" class="accordion-collapse collapse" aria-labelledby="headingOne-NAME" data-bs-parent="#accordion-NAME" role="region">
<div class="accordion-body">
</div> <!-- /accordion-body -->
</div>
</div> <!-- /accordion item -->
<div class="accordion-item">
<h3 class="accordion-header" id="headingTwo-NAME">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo-NAME" aria-expanded="false" aria-controls="collapseTwo-NAME"> Accordion Item #2 </button>
</h3>
<div id="collapseTwo-NAME" class="accordion-collapse collapse" aria-labelledby="headingTwo-NAME" data-bs-parent="#accordion-NAME" role="region">
<div class="accordion-body">
</div ><!-- /accordion-body -->
</div>
</div> <!-- /accordion item -->
<div class="accordion-item">
<h3 class="accordion-header" id="headingThree-NAME">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree-NAME" aria-expanded="false" aria-controls="collapseThree-NAME"> Accordion Item #3 </button>
</h3>
<div id="collapseThree-NAME" class="accordion-collapse collapse" aria-labelledby="headingThree-NAME" data-bs-parent="#accordion-NAME" role="region">
<div class="accordion-body">
</div ><!-- /accordion-body -->
</div >
</div ><!-- /accordion item -->
</div> <!-- /accordion -->
CSS
/* Accordion
------------------------------------ */
.accordion {
--bs-accordion-color: var(--grey-one);
--bs-accordion-border-color: #ffffff;
--bs-accordion-border-width: 0px;
--bs-accordion-border-radius: 0px;
--bs-accordion-inner-border-radius: 0px;
--bs-accordion-btn-color: var(--scottish-dark-teal);
--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23016574'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--bs-accordion-btn-icon-width: 1.4rem;
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--bs-accordion-btn-focus-border-color: var(--verdant-green);
--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--verdant-green);
--bs-accordion-active-color: #ffffff;
--bs-accordion-active-bg: var(--scottish-teal);
}
.accordion-body {
padding: 1rem important;
}
.accordion-button:not(.collapsed) {
background-color: var(--scottish-teal);
}
h2.accordion-header .accordion-button {
font-size: 1.25rem;
}
h3.accordion-header .accordion-button {
font-size: 1.15rem;
}
.accordion-button {
color: #000000;
padding: 1rem;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 600;
}
.accordion-button:hover {
background-color: #ffffff;
color: var(--scottish-teal);
}
.accordion-button:hover:after {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/* we need this for the hover state when the button has been selected and has focus */
.accordion-button:hover:not(.collapsed) {
background-color: var(--scottish-teal);
color: #ffffff;
}
.accordion-button:hover:not(.collapsed):after {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/* get rid of the focus outline */
.accordion-button:focus {
background-color: var(--grey-three);
color: var(--scottish-dark-teal);
border: none;
outline: none;
border-color: #ffffff;
box-shadow: none;
transition: background 0.3s ease-in-out;
}
.accordion-button:focus:hover {
background-color: var(--grey-three);
color: var(--scottish-dark-teal);
transition: background 0.3s ease-in-out;
}
.accordion-button:focus:after {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23012b31'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:focus:hover:after {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23012b31'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/* border bottom for items */
.accordion-item {
border-bottom: 3px solid var(--grey-three);
}
.accordion-item:hover {
border-bottom: 3px solid var(--verdant-green);
}