Skip to main content

Accordion

The accordion component lets users show and hide sections of content on a page.

<div class="accordion">
  <h2 class="accordion-heading">
    <button type="button" class="accordion-button" aria-expanded="false">
      Government and NHS advice
      <svg aria-hidden="true" focusable="false" viewBox="0 0 10 10">
        <rect class="vert" height="8" width="2" y="1" x="4"></rect>
        <rect height="2" width="8" y="4" x="1"></rect>
      </svg>
    </button>
  </h2>
  <div hidden>
    <p>Get <a href="https://www.gov.uk/coronavirus" target="_blank">coronavirus advice and information on GOV.UK</a>.</p>
  </div>
  <h2 class="accordion-heading">
    <button type="button" class="accordion-button" aria-expanded="false">
      Vaccines
      <svg aria-hidden="true" focusable="false" viewBox="0 0 10 10">
        <rect class="vert" height="8" width="2" y="1" x="4"></rect>
        <rect height="2" width="8" y="4" x="1"></rect>
      </svg>
    </button>
  </h2>
  <div hidden>
    <p>Anyone over the age of 16 can <a href="https://bnssghealthiertogether.org.uk/book-your-vaccine/" target="_blank">get vaccinated against COVID-19</a>.</p>
  </div>
  <h2 class="accordion-heading">
    <button type="button" class="accordion-button" aria-expanded="false">
      Get a test
      <svg aria-hidden="true" focusable="false" viewBox="0 0 10 10">
        <rect class="vert" height="8" width="2" y="1" x="4"></rect>
        <rect height="2" width="8" y="4" x="1"></rect>
      </svg>
    </button>
  </h2>
  <div hidden>
    <p>If you have <a href="https://www.nhs.uk/conditions/coronavirus-covid-19/symptoms/">symptom of coronavirus</a> you can <a href="https://www.gov.uk/get-coronavirus-test">book a free test</a> on GOV.UK.</p>
  </div>
</div>

You'll need to call the following JavaScript on a page that has accordions.

var elements = document.querySelectorAll(".aui .accordion h2.accordion-heading");
for (var i = 0; i < elements.length; i++) {
  let btn = elements[i].querySelector("button");
  let target = elements[i].nextElementSibling;
  btn.onclick = function (e) {
    e.preventDefault;
    let expanded = btn.getAttribute("aria-expanded") === "true";
    btn.setAttribute("aria-expanded", !expanded);
    target.hidden = expanded;
  };
}

When to use​

Only use an accordion if there's evidence it's helpful for users to:

  • see an overview of multiple, related sections of content
  • show and hide those sections as needed

Accordions can work well for people who use a service regularly.

When not to use​

Accordions hide content from users and not everyone will notice them or understand how they work. For this reason do not use an accordion for content which is essential to all users.

Consider if it’s better to:

  • simplify and reduce the amount of content
  • split the content across multiple pages
  • keep the content on a single page, separated by headings
  • use a list of links to let users navigate quickly to specific sections of content

Do not use the accordion component if the amount of content it would need to contain will make the page slow to load.

Use clear labels​

Accordions hide content, so the labels need to be clear. If necessary, you can add a summary line to help users understand what is in the section.