Skip to main content Skip to list of components
Beta

This is a new service – give us your feedback to help improve it.

Components

Accordion

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

Contents

  1. Status
Open this example in new tab

HTML 

<div class="tna-accordion" data-multiselectable="false" data-module="tna-accordion">
  <div class="tna-accordion__item" data-isopen="false">
    <h3 class="tna-accordion__heading tna-heading-s">
      Alpha
    </h3>
    <div class="tna-accordion__body" id="-content-1">
      <p>Content</p>
    </div>
  </div>
  <div class="tna-accordion__item" data-isopen="false">
    <h3 class="tna-accordion__heading tna-heading-s">
      Beta
    </h3>
    <div class="tna-accordion__body" id="-content-2">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p>
      <p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p>
      <p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>
    </div>
  </div>
  <div class="tna-accordion__item" data-isopen="false">
    <h3 class="tna-accordion__heading tna-heading-s">
      Gamma
    </h3>
    <div class="tna-accordion__body" id="-content-3">
      <ul class="tna-ul">
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li>Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim.</li>
        <li>Donec bibendum est leo, sed dapibus mauris facilisis vitae.</li>
        <li>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi.</li>
      </ul>
    </div>
  </div>
  <div class="tna-accordion__item" data-isopen="false">
    <h3 class="tna-accordion__heading tna-heading-s">
      Delta
    </h3>
    <div class="tna-accordion__body" id="-content-4">
      <div class="tna-table-wrapper">
        <table class="tna-table">
          <caption class="tna-table__caption">
            Records added and removed between 2020 and 2022.
          </caption>
          <thead class="tna-table__head">
            <tr class="tna-table__row">
              <th class="tna-table__header" scope="col">Year</th>
              <th class="tna-table__header" scope="col">Chinese zodiac sign</th>
              <th class="tna-table__header tna-table__header--numeric" scope="col">Records added</th>
              <th class="tna-table__header tna-table__header--numeric" scope="col">Size (megabytes)</th>
            </tr>
          </thead>
          <tbody class="tna-table__body">
            <tr>
              <th class="tna-table__header" scope="row">2020</th>
              <td class="tna-table__cell">Rat</td>
              <td class="tna-table__cell tna-table__cell--numeric">123,456</td>
              <td class="tna-table__cell tna-table__cell--numeric">789</td>
            </tr>
            <tr>
              <th class="tna-table__header" scope="row">2021</th>
              <td class="tna-table__cell">Ox</td>
              <td class="tna-table__cell tna-table__cell--numeric">456,789</td>
              <td class="tna-table__cell tna-table__cell--numeric">123</td>
            </tr>
            <tr>
              <th class="tna-table__header" scope="row">2022</th>
              <td class="tna-table__cell">Tiger</td>
              <td class="tna-table__cell tna-table__cell--numeric">42,424</td>
              <td class="tna-table__cell tna-table__cell--numeric">1,337</td>
            </tr>
          </tbody>
          <tfoot class="tna-table__foot">
            <tr>
              <th class="tna-table__header" scope="row">Totals</th>
              <td class="tna-table__cell"></td>
              <td class="tna-table__cell tna-table__cell--numeric">622,669</td>
              <td class="tna-table__cell tna-table__cell--numeric">2,249</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
itemHeadingLevel number

Required.

The heading level which represents an element from <h1> through to <h6> for each of the accordion items.
items array

Required.

The sections within the accordion.

See items.
id string

Required.

A unique ID for the accordion group.
openMultipleItems boolean

If true, multiple accordion items can be opened.
classes string

Classes to add to the accordion.
attributes object

HTML attributes (for example data attributes) to add to the accordion.
Options for items
Name Type Description
title string

Required.

The heading of each accordion section.
body string

The HTML for the main body of the accordion item. Not displayed if text is set.
text string

The text for the accordion item which will be inserted into a <p> element. Overwrites body if it is set.
open boolean

If true, open the accordion item. If a group is set, only one item in that group can be open.

 
{% from "nationalarchives/components/accordion/macro.njk" import tnaAccordion %}

{{ tnaAccordion({
  itemHeadingLevel: 3,
  items: [
    {
      title: "Alpha",
      text: "Content"
    },
    {
      title: "Beta",
      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>"
    },
    {
      title: "Gamma",
      body: '<ul class="tna-ul">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim.</li><li>Donec bibendum est leo, sed dapibus mauris facilisis vitae.</li>
  <li>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi.</li>
</ul>'
    },
    {
      title: "Delta",
      body: '<div class="tna-table-wrapper">
  <table class="tna-table">
    <caption class="tna-table__caption">
      Records added and removed between 2020 and 2022.
    </caption>
    <thead class="tna-table__head">
      <tr class="tna-table__row">
        <th class="tna-table__header" scope="col">Year</th>
        <th class="tna-table__header" scope="col">Chinese zodiac sign</th>
        <th class="tna-table__header tna-table__header--numeric" scope="col">Records added</th>
        <th class="tna-table__header tna-table__header--numeric" scope="col">Size (megabytes)</th>
      </tr>
    </thead>
    <tbody class="tna-table__body">
      <tr>
        <th class="tna-table__header" scope="row">2020</th>
        <td class="tna-table__cell">Rat</td>
        <td class="tna-table__cell tna-table__cell--numeric">123,456</td>
        <td class="tna-table__cell tna-table__cell--numeric">789</td>
      </tr>
      <tr>
        <th class="tna-table__header" scope="row">2021</th>
        <td class="tna-table__cell">Ox</td>
        <td class="tna-table__cell tna-table__cell--numeric">456,789</td>
        <td class="tna-table__cell tna-table__cell--numeric">123</td>
      </tr>
      <tr>
        <th class="tna-table__header" scope="row">2022</th>
        <td class="tna-table__cell">Tiger</td>
        <td class="tna-table__cell tna-table__cell--numeric">42,424</td>
        <td class="tna-table__cell tna-table__cell--numeric">1,337</td>
      </tr>
    </tbody>
    <tfoot class="tna-table__foot">
      <tr>
        <th class="tna-table__header" scope="row">Totals</th>
        <td class="tna-table__cell"></td>
        <td class="tna-table__cell tna-table__cell--numeric">622,669</td>
        <td class="tna-table__cell tna-table__cell--numeric">2,249</td>
      </tr>
    </tfoot>
  </table>
</div>'
    }
  ],
  group: "group-1"
}) }}

Status

Status
In development
Tested without JavaScript
Yes
Tested without CSS
Yes
WCAG 2.2 AA compliant
In development
Analytics integrated
In development
Documentation complete
No

Back to top