Skip to main content Skip to list of components
Service phase: Beta

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

Components

Accordion

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

Status
Official

Contents

Open this example in new tab

Contents

HTML 

<div class="tna-accordion" data-single-open-item="false" data-module="tna-accordion">
  <div class="tna-accordion__item" data-isopen="false">
    <h3 class="tna-accordion__heading tna-heading-s">
      Discovery
    </h3>
    <div class="tna-accordion__body" id="accordion-demo-content-1">
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div class="tna-accordion__item" data-isopen="false">
    <h3 class="tna-accordion__heading tna-heading-s">
      Alpha
    </h3>
    <div class="tna-accordion__body" id="accordion-demo-content-2">
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div class="tna-accordion__item" data-isopen="false">
    <h3 class="tna-accordion__heading tna-heading-s">
      Private beta
    </h3>
    <div class="tna-accordion__body" id="accordion-demo-content-3">
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div class="tna-accordion__item" data-isopen="false">
    <h3 class="tna-accordion__heading tna-heading-s">
      Public beta
    </h3>
    <div class="tna-accordion__body" id="accordion-demo-content-4">
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div class="tna-accordion__item" data-isopen="false">
    <h3 class="tna-accordion__heading tna-heading-s">
      Live
    </h3>
    <div class="tna-accordion__body" id="accordion-demo-content-5">
      <p>Lorem ipsum</p>
    </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.
itemHeadingSize string

The physical size of the accordion item titles (xl, l, m, s or xs). This will be ignored if JavaScript is enabled and the items will have a small heading.

Default value: s
items array

Required.

The sections within the accordion.

See macro options for items.
id string

Required.

A unique ID for the accordion group.
singleOpenItem boolean

If true, only one accordion items can be opened at a time.

Default value: false
toggleAllButton object

Allows the user to open or close all sections.

See macro options for toggleAllButton.
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.

Default value: false
Options for toggleAllButton
Name Type Description
enabled boolean

Required.

If true, add a button above the accordion that allows the user to open or close all sections.

Default value: false
openAllLabel string

The label for the button when all sections are closed.

Default value: Show all sections
closeAllLabel string

The label for the button when all sections are open.

Default value: Hide all sections

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

{{ tnaAccordion({
  itemHeadingLevel: 3,
  items: [
    {
      title: "Discovery",
      text: "Lorem ipsum"
    },
    {
      title: "Alpha",
      text: "Lorem ipsum"
    },
    {
      title: "Private beta",
      text: "Lorem ipsum"
    },
    {
      title: "Public beta",
      text: "Lorem ipsum"
    },
    {
      title: "Live",
      text: "Lorem ipsum"
    }
  ],
  id: "accordion-demo"
}) }}

Jinja

Important information

This is an experimental feature showing a Jinja2 macro based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/accordion/macro.html" import tnaAccordion %}

{{ tnaAccordion({
  "itemHeadingLevel": 3,
  "items": [
    {
      "title": "Discovery",
      "text": "Lorem ipsum"
    },
    {
      "title": "Alpha",
      "text": "Lorem ipsum"
    },
    {
      "title": "Private beta",
      "text": "Lorem ipsum"
    },
    {
      "title": "Public beta",
      "text": "Lorem ipsum"
    },
    {
      "title": "Live",
      "text": "Lorem ipsum"
    }
  ],
  "id": "accordion-demo"
}) }}

Open and close all

Customise with toggleAllButton to add an extra option to show or hide all accordion items.

Open this example in new tab

Contents

HTML 

<div class="tna-accordion" data-single-open-item="false" data-module="tna-accordion">
  <button class="tna-accordion__toggle-all" type="button" data-open-all-label="Show all sections" data-close-all-label="Hide all sections" hidden></button>
  <div class="tna-accordion__item" data-isopen="false">
    <h3 class="tna-accordion__heading tna-heading-s">
      Discovery
    </h3>
    <div class="tna-accordion__body" id="accordion-demo-content-1">
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div class="tna-accordion__item" data-isopen="false">
    <h3 class="tna-accordion__heading tna-heading-s">
      Alpha
    </h3>
    <div class="tna-accordion__body" id="accordion-demo-content-2">
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div class="tna-accordion__item" data-isopen="false">
    <h3 class="tna-accordion__heading tna-heading-s">
      Private beta
    </h3>
    <div class="tna-accordion__body" id="accordion-demo-content-3">
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div class="tna-accordion__item" data-isopen="false">
    <h3 class="tna-accordion__heading tna-heading-s">
      Public beta
    </h3>
    <div class="tna-accordion__body" id="accordion-demo-content-4">
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div class="tna-accordion__item" data-isopen="false">
    <h3 class="tna-accordion__heading tna-heading-s">
      Live
    </h3>
    <div class="tna-accordion__body" id="accordion-demo-content-5">
      <p>Lorem ipsum</p>
    </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.
itemHeadingSize string

The physical size of the accordion item titles (xl, l, m, s or xs). This will be ignored if JavaScript is enabled and the items will have a small heading.

Default value: s
items array

Required.

The sections within the accordion.

See macro options for items.
id string

Required.

A unique ID for the accordion group.
singleOpenItem boolean

If true, only one accordion items can be opened at a time.

Default value: false
toggleAllButton object

Allows the user to open or close all sections.

See macro options for toggleAllButton.
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.

Default value: false
Options for toggleAllButton
Name Type Description
enabled boolean

Required.

If true, add a button above the accordion that allows the user to open or close all sections.

Default value: false
openAllLabel string

The label for the button when all sections are closed.

Default value: Show all sections
closeAllLabel string

The label for the button when all sections are open.

Default value: Hide all sections

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

{{ tnaAccordion({
  itemHeadingLevel: 3,
  items: [
    {
      title: "Discovery",
      text: "Lorem ipsum"
    },
    {
      title: "Alpha",
      text: "Lorem ipsum"
    },
    {
      title: "Private beta",
      text: "Lorem ipsum"
    },
    {
      title: "Public beta",
      text: "Lorem ipsum"
    },
    {
      title: "Live",
      text: "Lorem ipsum"
    }
  ],
  id: "accordion-demo",
  toggleAllButton: {
    enabled: true
  }
}) }}

Jinja

Important information

This is an experimental feature showing a Jinja2 macro based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/accordion/macro.html" import tnaAccordion %}

{{ tnaAccordion({
  "itemHeadingLevel": 3,
  "items": [
    {
      "title": "Discovery",
      "text": "Lorem ipsum"
    },
    {
      "title": "Alpha",
      "text": "Lorem ipsum"
    },
    {
      "title": "Private beta",
      "text": "Lorem ipsum"
    },
    {
      "title": "Public beta",
      "text": "Lorem ipsum"
    },
    {
      "title": "Live",
      "text": "Lorem ipsum"
    }
  ],
  "id": "accordion-demo",
  "toggleAllButton": {
    "enabled": True
  }
}) }}

Something not right?

We are working to improve this service and appreciate your input.

Report a problem Provide feedback Suggest an edit