Accordion

Accordion

(open in a new window)

Code

Markup

<div class="govuk-accordion myClass" data-module="govuk-accordion" id="default-example" data-attribute="value">
      <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" aria-labelledby="default-example-heading-1">
          <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="default-example-heading-2">
              Section B
            </span>
          </h2>
        </div>
        <div id="default-example-content-2" class="govuk-accordion__section-content" aria-labelledby="default-example-heading-2">
          <ul class="govuk-list govuk-list--bullet">
  <li>Example item 2</li>
</ul>

        </div>
      </div>
</div>

Macro

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

{{ govukAccordion({
  "id": "default-example",
  "classes": "myClass",
  "attributes": {
    "data-attribute": "value"
  },
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "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"
      }
    }
  ]
}) }}

Accordion with additional descriptions

(open in a new window)

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" aria-labelledby="with-descriptions-heading-1">
          <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</span>
            </div>
        </div>
        <div id="with-descriptions-content-2" class="govuk-accordion__section-content" aria-labelledby="with-descriptions-heading-2">
          <ul class="govuk-list govuk-list--bullet">
  <li>Example item 2</li>
</ul>

        </div>
      </div>
</div>

Macro

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

{{ govukAccordion({
  "id": "with-descriptions",
  "items": [
    {
      "heading": {
        "text": "Test"
      },
      "summary": {
        "text": "Additional description"
      },
      "content": {
        "html": "<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</span>"
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}) }}

Accordion with one section open

(open in a new window)

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" aria-labelledby="one-section-open-example-heading-1">
          <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" aria-labelledby="one-section-open-example-heading-2">
          <ul class="govuk-list govuk-list--bullet">
  <li>Example item 2</li>
</ul>

        </div>
      </div>
</div>

Macro

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

Accordion with all sections already open

(open in a new window)

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" aria-labelledby="all-sections-open-example-heading-1">
          <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" aria-labelledby="all-sections-open-example-heading-2">
          <ul class="govuk-list govuk-list--bullet">
  <li>Example item 2</li>
</ul>

        </div>
      </div>
</div>

Macro

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

Accordion with focusable elements inside

(open in a new window)

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" aria-labelledby="with-focusable-elements-heading-1">
          <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" aria-labelledby="with-focusable-elements-heading-2">
          <a class="govuk-link" href="#">Link B</a>
        </div>
      </div>
</div>

Macro

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