Skip to main content
Component Pad – Experimental – output can be wrong
GOV.UK Frontend

Accordion

Component guide

Example

Writing well for the web

This is the content for Writing well for the web.

Writing well for specialists

This is the content for Writing well for specialists.

Know your audience

This is the content for Know your audience.

How people read

This is the content for How people read.

HTML 

<div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
  
    
  <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">
    
      <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">
    
      <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">
    
      <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">
    
      <p class="govuk-body">This is the content for How people read.</p>
    
    </div>
  </div>

  
</div>
Nunjucks 

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