Installation
Coming soon..
Examples
<div class="co-accordion co-p-yblock-6 co-p-xblock-4 md:co-p-6 lg:co-p-6 xl:co-p-6">
<div class="co-accordion__header">
<span id="title1">Glossary</span>
<button aria-describedby="title1" id="toggleAll" type="button" class="co-button co-button--tertiary co-button--padding">
show all
</button>
</div>
<button aria-controls="panel1" type="button" class="co-accordion__item" id="accordion1" aria-expanded="false">
Annuity
<span class="co-accordion__actions">
<span aria-live="polite">show</span>
<i class="co-icon-16__chevron-down"></i>
</span>
</button>
<div class="co-accordion__body" id="panel1" role="region" aria-labelledby="accordion1">
<p>
An annuity is an amount paid out every year to someone. The money
usually comes from an insurance policy. It can be split up into
smaller amounts and paid out more frequently, such as monthly. It is
usually paid for the rest of the beneficiary's life.
</p>
</div>
<button aria-controls="panel2" type="button" class="co-accordion__item" id="accordion2" aria-expanded="false">
Assets
<span class="co-accordion__actions">
<span aria-live="polite">show</span>
<i class="co-icon-16__chevron-down"></i>
</span>
</button>
<div class="co-accordion__body" id="panel2" role="region" aria-labelledby="accordion2">
<p>
These are things which are owned such as buildings, vehicles, stock
and money in the bank.
</p>
</div>
<button aria-controls="panel3" type="button" class="co-accordion__item" id="accordion3" aria-expanded="false">
Basic state pensions
<span class="co-accordion__actions">
<span aria-live="polite">show</span>
<i class="co-icon-16__chevron-down"></i>
</span>
</button>
<div class="co-accordion__body" id="panel3" role="region" aria-labelledby="accordion3">
<p>
This is the retirement pension the Government pays to people who
have paid enough national insurance contributions. Some people may
receive a reduced basic state pension because they have not paid
enough contributions.
</p>
</div>
</div>
Accordion
<div class="co-accordion co-p-yblock-6 co-p-xblock-4 md:co-p-6 lg:co-p-6 xl:co-p-6">
<div class="co-accordion__header">
<span id="title2">Glossary</span>
<button aria-describedby="title2" type="button" class="co-button co-button--tertiary co-button--padding">
hide all
</button>
</div>
<button type="button" class="co-accordion__item" aria-expanded="true">
A really long heading for the annuity glossary
<span class="co-accordion__actions"> hide
<i class="co-icon-16__chevron-up"></i>
</span>
</button>
<div class="co-accordion__body co-accordion__item--open">
<p>
An annuity is an amount paid out every year to someone. The money
usually comes from an insurance policy. It can be split up into
smaller amounts and paid out more frequently, such as monthly. It is
usually paid for the rest of the beneficiary's life.
</p>
</div>
<button type="button" class="co-accordion__item" aria-expanded="true">
Assets
<span class="co-accordion__actions"> hide
<i class="co-icon-16__chevron-up"></i>
</span>
</button>
<div class="co-accordion__body co-accordion__item--open">
<p>
These are things which are owned such as buildings, vehicles, stock
and money in the bank.
</p>
</div>
<button type="button" class="co-accordion__item" aria-expanded="true">
Basic state pensions
<span class="co-accordion__actions">hide
<i class="co-icon-16__chevron-up"></i>
</span>
</button>
<div class="co-accordion__body co-accordion__item--open">
<p>
This is the retirement pension the Government pays to people who
have paid enough national insurance contributions. Some people may
receive a reduced basic state pension because they have not paid
enough contributions.
</p>
</div>
</div>
Accordion - no script
const acc = [
document.getElementById("accordion1"),
document.getElementById("accordion2"),
document.getElementById("accordion3"),
document.getElementById("accordion4"),
];
const panels = [
document.getElementById("panel1"),
document.getElementById("panel2"),
document.getElementById("panel3"),
document.getElementById("panel4"),
];
const toggleAllBtn = document.getElementById("toggleAll");
let allOpen = false;
for (let i = 0; i < acc.length; i++) {
acc[i]?.addEventListener("click", function () {
this.classList.toggle("active");
const panel = this.nextElementSibling;
const text = this.querySelector(".co-accordion__actions span");
const icon = this.querySelector(".co-accordion__actions i");
if (panel.style.display === "block") {
panel.style.display = "none";
text.textContent = "show";
icon.className = "co-icon-16__chevron-down";
this.setAttribute("aria-expanded", false);
} else {
panel.style.display = "block";
text.textContent = "hide";
icon.className = "co-icon-16__chevron-up";
this.setAttribute("aria-expanded", true);
panels[i].setAttribute("aria-live", "polite");
}
});
}
toggleAllBtn.addEventListener("click", function () {
allOpen = !allOpen;
for (let i = 0; i < panels.length; i++) {
if (acc[i]) {
const text = acc[i].querySelector(".co-accordion__actions span");
const icon = acc[i].querySelector(".co-accordion__actions i");
if (allOpen) {
panels[i].style.display = "block";
acc[i].classList.add("active");
text.textContent = "hide";
icon.className = "co-icon-16__chevron-up";
acc[i].setAttribute("aria-expanded", "true");
panels[i].setAttribute("aria-live", "polite");
} else {
panels[i].style.display = "none";
acc[i].classList.remove("active");
text.textContent = "show";
icon.className = "co-icon-16__chevron-down";
acc[i].setAttribute("aria-expanded", "false");
}
}
}
toggleAllBtn.textContent = allOpen ? "hide all" : "show all";
});
Use above snippet to show/hide the accordion content
Class list
|
Class name |
Description |
|---|---|
|
co-accordion__item--open |
Add this modifier class to open individual panel of the accordion |
Accessibility
|
Attribute name |
Usage |
|---|---|
|
aria-describedby |
Use this attribute to the show all/hide all buttons to announce the accordion title. |
|
aria-controls |
This helps the screen readers announce the relationship between the button and content. |
|
aria-expanded |
Set to true when the accordion panel is expanded, otherwise set to false. |
|
aria-live="polite" |
This will notify the screen reader to provide updates when the user is idle. |
|
role="region" |
Creates a landmark region that contains the currently expanded accordion panel. |
|
aria-labelledby |
References the accordion header button that expands and collapses the region. |