This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Skip to main content

Accordion

Code

Markup

<div class="govuk-accordion" data-module="govuk-accordion" id="default-example">
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="default-example-heading-1">
          Section A
        </span>
      </h2>
    </div>
    <div id="default-example-content-1" class="govuk-accordion__section-content">
      <p class="govuk-body">
        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.
      </p>
    </div>
  </div>
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="default-example-heading-2">
          Section B
        </span>
      </h2>
    </div>
    <div id="default-example-content-2" class="govuk-accordion__section-content">
      <ul class="govuk-list govuk-list--bullet">
        <li>Example item 2</li>
      </ul>
    </div>
  </div>
</div>

Macro

{% 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"
      }
    }
  ]
}) }}
Code

Markup

<div class="govuk-accordion" data-module="govuk-accordion" id="with-descriptions">
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="with-descriptions-heading-1">
          Test
        </span>
      </h2>
      <div class="govuk-accordion__section-summary govuk-body" id="with-descriptions-summary-1">
        Additional description
      </div>
    </div>
    <div id="with-descriptions-content-1" class="govuk-accordion__section-content">
      <p class="govuk-body">
        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.
      </p>
      <ul class="govuk-list govuk-list--bullet">
        <li>Example item 1</li>
      </ul>
    </div>
  </div>
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="with-descriptions-heading-2">
          Test 2
        </span>
      </h2>
      <div class="govuk-accordion__section-summary govuk-body" id="with-descriptions-summary-2">
        <span class="govuk-!-font-weight-regular">Additional description (wrapped in span)</span>
      </div>
    </div>
    <div id="with-descriptions-content-2" class="govuk-accordion__section-content">
      <ul class="govuk-list govuk-list--bullet">
        <li>Example item 2</li>
      </ul>
    </div>
  </div>
</div>

Macro

{% 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"
      }
    }
  ]
}) }}
Code

Markup

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

Macro

{% 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"
      }
    }
  ]
}) }}
Code

Markup

<div class="govuk-accordion" data-module="govuk-accordion" id="one-section-open-example">
  <div class="govuk-accordion__section govuk-accordion__section--expanded">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="one-section-open-example-heading-1">
          Section A
        </span>
      </h2>
    </div>
    <div id="one-section-open-example-content-1" class="govuk-accordion__section-content">
      <ul class="govuk-list govuk-list--bullet">
        <li>Example item 1</li>
      </ul>
    </div>
  </div>
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="one-section-open-example-heading-2">
          Section B
        </span>
      </h2>
    </div>
    <div id="one-section-open-example-content-2" class="govuk-accordion__section-content">
      <ul class="govuk-list govuk-list--bullet">
        <li>Example item 2</li>
      </ul>
    </div>
  </div>
</div>

Macro

{% 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"
      }
    }
  ]
}) }}
Code

Markup

<div class="govuk-accordion" data-module="govuk-accordion" id="all-sections-open-example">
  <div class="govuk-accordion__section govuk-accordion__section--expanded">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="all-sections-open-example-heading-1">
          Section A
        </span>
      </h2>
    </div>
    <div id="all-sections-open-example-content-1" class="govuk-accordion__section-content">
      <ul class="govuk-list govuk-list--bullet">
        <li>Example item 1</li>
      </ul>
    </div>
  </div>
  <div class="govuk-accordion__section govuk-accordion__section--expanded">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="all-sections-open-example-heading-2">
          Section B
        </span>
      </h2>
    </div>
    <div id="all-sections-open-example-content-2" class="govuk-accordion__section-content">
      <ul class="govuk-list govuk-list--bullet">
        <li>Example item 2</li>
      </ul>
    </div>
  </div>
</div>

Macro

{% 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"
      }
    }
  ]
}) }}
Code

Markup

<div class="govuk-accordion" data-module="govuk-accordion" id="with-focusable-elements">
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="with-focusable-elements-heading-1">
          Section A
        </span>
      </h2>
    </div>
    <div id="with-focusable-elements-content-1" class="govuk-accordion__section-content">
      <a class="govuk-link" href="#">Link A</a>
    </div>
  </div>
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="with-focusable-elements-heading-2">
          Section B
        </span>
      </h2>
    </div>
    <div id="with-focusable-elements-content-2" class="govuk-accordion__section-content">
      <a class="govuk-link" href="#">Link B</a>
    </div>
  </div>
</div>

Macro

{% 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>'
      }
    }
  ]
}) }}
Code

Markup

<div class="govuk-accordion" data-module="govuk-accordion" id="with-translations" data-i18n.hide-all-sections="Collapse all sections" data-i18n.hide-section="Collapse" data-i18n.hide-section-aria-label="Collapse this section" data-i18n.show-all-sections="Expand all sections" data-i18n.show-section="Expand" data-i18n.show-section-aria-label="Expand this section">
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="with-translations-heading-1">
          Section A
        </span>
      </h2>
    </div>
    <div id="with-translations-content-1" class="govuk-accordion__section-content">
      <p class="govuk-body">
        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.
      </p>
    </div>
  </div>
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="with-translations-heading-2">
          Section B
        </span>
      </h2>
    </div>
    <div id="with-translations-content-2" class="govuk-accordion__section-content">
      <ul class="govuk-list govuk-list--bullet">
        <li>Example item 2</li>
      </ul>
    </div>
  </div>
</div>

Macro

{% 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"
      }
    }
  ]
}) }}