GOVUK Accordion

Use this component when you want a user to be able to copy content easily.

Open example in new window
HTML 




<div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default" data-test="this is a 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="accordion-default-heading-1">
              Writing well for the web
            </span>
          </h2>

        </div>
        <div id="accordion-default-content-1" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-1">
          <p class='govuk-body'>This is the content for Writing well for the web.</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="accordion-default-heading-2">
              Writing well for specialists
            </span>
          </h2>

        </div>
        <div id="accordion-default-content-2" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-2">
          <p class='govuk-body'>This is the content for Writing well for specialists.</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="accordion-default-heading-3">
              Know your audience
            </span>
          </h2>

        </div>
        <div id="accordion-default-content-3" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-3">
          <p class='govuk-body'>This is the content for Know your audience.</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="accordion-default-heading-4">
              How people read
            </span>
          </h2>

        </div>
        <div id="accordion-default-content-4" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-4">
          <p class='govuk-body'>This is the content for How people read.</p>
        </div>
      </div>


</div>
Jinja 
{% from "govuk_frontend_jinja/components/accordion/macro.html" import govukAccordion -%}

{{ govukAccordion({
    "id": "accordion-default",
    "items": [
      {
        "heading": {
          "text": "Writing well for the web"
        },
        "content": {
          "html": "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
        }
      },
      {
        "heading": {
          "text": "Writing well for specialists"
        },
        "content": {
          "html": "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
        }
      },
        {
        "heading": {
          "text": "Know your audience"
        },
        "content": {
          "html": "<p class='govuk-body'>This is the content for Know your audience.</p>"
        }
      },
        {
        "heading": {
          "text": "How people read"
        },
        "content": {
          "html": "<p class='govuk-body'>This is the content for How people read.</p>"
        }
      }
    ],
    "attributes": {
      "data-test": "this is a value"
    }
}) }}