Accordion examples

# default

Section A

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.

Section B

Example item 2

JSON
Nunjucks

{
  "id": "default-example",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
      }
    },
    {
      "heading": {
        "text": "Section B"
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}


{% from "govuk/components/accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "default-example",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
      }
    },
    {
      "heading": {
        "text": "Section B"
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}) }}

# with additional descriptions

Test

Additional description

Example item 1

Test 2

Additional description (wrapped in span)

Example item 2

JSON
Nunjucks

{
  "id": "with-descriptions",
  "items": [
    {
      "heading": {
        "text": "Test"
      },
      "summary": {
        "text": "Additional description"
      },
      "content": {
        "html": "<p class=\"govuk-body\">\n  We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n</p>\n<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
      }
    },
    {
      "heading": {
        "text": "Test 2"
      },
      "summary": {
        "html": "<span class=\"govuk-!-font-weight-regular\">Additional description (wrapped in span)</span>"
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}


{% from "govuk/components/accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "with-descriptions",
  "items": [
    {
      "heading": {
        "text": "Test"
      },
      "summary": {
        "text": "Additional description"
      },
      "content": {
        "html": "<p class=\"govuk-body\">\n  We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n</p>\n<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
      }
    },
    {
      "heading": {
        "text": "Test 2"
      },
      "summary": {
        "html": "<span class=\"govuk-!-font-weight-regular\">Additional description (wrapped in span)</span>"
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}) }}

# with long content and description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor.

Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem.

Example item 1

Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum.

Maecenas nec est sapien. Etiam varius luctus mauris non porttitor.

Example item 2

JSON
Nunjucks

{
  "id": "with-long-content-and-description",
  "items": [
    {
      "heading": {
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor."
      },
      "summary": {
        "text": "Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem."
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
      }
    },
    {
      "heading": {
        "text": "Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum."
      },
      "summary": {
        "html": "<span class=\"govuk-!-font-weight-regular\">Maecenas nec <abbr>est</abbr> sapien. Etiam varius luctus mauris non porttitor. </span>"
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}


{% from "govuk/components/accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "with-long-content-and-description",
  "items": [
    {
      "heading": {
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor."
      },
      "summary": {
        "text": "Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem."
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
      }
    },
    {
      "heading": {
        "text": "Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum."
      },
      "summary": {
        "html": "<span class=\"govuk-!-font-weight-regular\">Maecenas nec <abbr>est</abbr> sapien. Etiam varius luctus mauris non porttitor. </span>"
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}) }}

# with all sections already open

Section A

Example item 1

Section B

Example item 2

JSON
Nunjucks

{
  "id": "all-sections-open-example",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "expanded": true,
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
      }
    },
    {
      "heading": {
        "text": "Section B"
      },
      "expanded": true,
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}


{% from "govuk/components/accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "all-sections-open-example",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "expanded": true,
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
      }
    },
    {
      "heading": {
        "text": "Section B"
      },
      "expanded": true,
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}) }}

# classes

Section A

Some content

JSON
Nunjucks

{
  "id": "accordion-classes",
  "classes": "myClass",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "text": "Some content"
      }
    }
  ]
}


{% from "govuk/components/accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "accordion-classes",
  "classes": "myClass",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "text": "Some content"
      }
    }
  ]
}) }}

# attributes

Section A

Some content

JSON
Nunjucks

{
  "id": "accordion-attributes",
  "attributes": {
    "data-attribute": "value"
  },
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "text": "Some content"
      }
    }
  ]
}


{% from "govuk/components/accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "accordion-attributes",
  "attributes": {
    "data-attribute": "value"
  },
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "text": "Some content"
      }
    }
  ]
}) }}

# custom heading level

Section A

Some content

JSON
Nunjucks

{
  "id": "accordion-heading",
  "headingLevel": 3,
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "text": "Some content"
      }
    }
  ]
}


{% from "govuk/components/accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "accordion-heading",
  "headingLevel": 3,
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "text": "Some content"
      }
    }
  ]
}) }}

# heading html

Section A

Some content

JSON
Nunjucks

{
  "id": "accordion-heading-html",
  "items": [
    {
      "heading": {
        "html": "<span class=\"myClass\">Section A</span>"
      },
      "content": {
        "text": "Some content"
      }
    }
  ]
}


{% from "govuk/components/accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "accordion-heading-html",
  "items": [
    {
      "heading": {
        "html": "<span class=\"myClass\">Section A</span>"
      },
      "content": {
        "text": "Some content"
      }
    }
  ]
}) }}

# with falsy values

Section A

Some content

Section B

Some content

JSON
Nunjucks

{
  "id": "accordion-falsy",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "text": "Some content"
      }
    },
    false,
    "",
    null,
    {
      "heading": {
        "text": "Section B"
      },
      "content": {
        "text": "Some content"
      }
    }
  ]
}


{% from "govuk/components/accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "accordion-falsy",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "text": "Some content"
      }
    },
    false,
    "",
    null,
    {
      "heading": {
        "text": "Section B"
      },
      "content": {
        "text": "Some content"
      }
    }
  ]
}) }}

# with remember expanded off

Section A

Some content

JSON
Nunjucks

{
  "id": "accordion-remember-expanded-off",
  "rememberExpanded": false,
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "text": "Some content"
      }
    }
  ]
}


{% from "govuk/components/accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "accordion-remember-expanded-off",
  "rememberExpanded": false,
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "text": "Some content"
      }
    }
  ]
}) }}

# with focusable elements inside

Section A

Link A

Section B

Link B

JSON
Nunjucks

{
  "id": "with-focusable-elements",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "html": "<a class=\"govuk-link\" href=\"#\">Link A</a>"
      }
    },
    {
      "heading": {
        "text": "Section B"
      },
      "content": {
        "html": "<a class=\"govuk-link\" href=\"#\">Link B</a>"
      }
    }
  ]
}


{% from "govuk/components/accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "with-focusable-elements",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "html": "<a class=\"govuk-link\" href=\"#\">Link A</a>"
      }
    },
    {
      "heading": {
        "text": "Section B"
      },
      "content": {
        "html": "<a class=\"govuk-link\" href=\"#\">Link B</a>"
      }
    }
  ]
}) }}

# with one section open

Section A

Example item 1

Section B

Example item 2

JSON
Nunjucks

{
  "id": "one-section-open-example",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "expanded": true,
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
      }
    },
    {
      "heading": {
        "text": "Section B"
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}


{% from "govuk/components/accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "one-section-open-example",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "expanded": true,
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
      }
    },
    {
      "heading": {
        "text": "Section B"
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}) }}

# with translations

Section A

Section B

Example item 2

JSON
Nunjucks

{
  "id": "with-translations",
  "hideAllSectionsText": "Collapse all sections",
  "showAllSectionsText": "Expand all sections",
  "hideSectionText": "Collapse",
  "hideSectionAriaLabelText": "Collapse this section",
  "showSectionText": "Expand",
  "showSectionAriaLabelText": "Expand this section",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
      }
    },
    {
      "heading": {
        "text": "Section B"
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}


{% from "govuk/components/accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "with-translations",
  "hideAllSectionsText": "Collapse all sections",
  "showAllSectionsText": "Expand all sections",
  "hideSectionText": "Collapse",
  "hideSectionAriaLabelText": "Collapse this section",
  "showSectionText": "Expand",
  "showSectionAriaLabelText": "Expand this section",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
      }
    },
    {
      "heading": {
        "text": "Section B"
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}) }}