Accordions create extra work

Accordions can either hide information that needs to be split over pages for easier reading, or unnecessarily hide key information that can be written concisely.

Typical example that causes barriers

This example can happen when showing information about a user that they need to check.

Example
HTML
Nunjucks

<span class="govuk-caption-l">Original version</span>
<h1 class="govuk-heading-l">
  Examples of complex information
</h1>
<div class="govuk-accordion" data-module="govuk-accordion" id="examples">
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="examples-heading-1">
          Writing well for the web
        </span>
      </h2>
    </div>
    <div id="examples-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="examples-heading-2">
          Writing well for specialists
        </span>
      </h2>
    </div>
    <div id="examples-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="examples-heading-3">
          Know your audience
        </span>
      </h2>
    </div>
    <div id="examples-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="examples-heading-4">
          How people read
        </span>
      </h2>
    </div>
    <div id="examples-content-4" class="govuk-accordion__section-content">
      <p class="govuk-body">This is the content for How people read.</p>
    </div>
  </div>
</div>

<span class="govuk-caption-l">Original version</span>

<h1 class="govuk-heading-l">
  Examples of complex information
</h1>

{{ govukAccordion({
  id: "examples",
  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>'
      }
    }
  ]
}) }}

Accordions hide key information that may be necessary for everyone. While there may be uses for accordions in some scenarios like case working systems, generally it is better to start by either no content and adding when there is a need, or all content and using headers, links and occasional details text.

<span class="govuk-caption-l">Improved version</span>
<h1 class="govuk-heading-l">
  Examples of complex information
</h1>
<p class="govuk-body">
  This information is here.
</p>
<h2 class="govuk-heading-m">
  Writing well for the web
</h2>
<p class="govuk-body">
  This is the content for Writing well for the web.
</p>
<h2 class="govuk-heading-m">
  Writing well for specialists
</h2>
<p class="govuk-body">
  This is the content for Writing well for specialists.
</p>
<h2 class="govuk-heading-m">
  Know your audience
</h2>
<p class="govuk-body">
  This is the content for Know your audience.
</p>
<h2 class="govuk-heading-m">
  How people read
</h2>
<p class="govuk-body">
  This is the content for How people read.
</p>

<span class="govuk-caption-l">Improved version</span>

<h1 class="govuk-heading-l">
  Examples of complex information
</h1>

<p class="govuk-body">
  This information is here.
</p>

<h2 class="govuk-heading-m">
  Writing well for the web
</h2>

<p class="govuk-body">
  This is the content for Writing well for the web.
</p>

<h2 class="govuk-heading-m">
  Writing well for specialists
</h2>

<p class="govuk-body">
  This is the content for Writing well for specialists.
</p>

<h2 class="govuk-heading-m">
  Know your audience
</h2>

<p class="govuk-body">
  This is the content for Know your audience.
</p>

<h2 class="govuk-heading-m">
  How people read
</h2>

<p class="govuk-body">
  This is the content for How people read.
</p>

Showing information as a start helps everyone get the information - if there is too much information then the page needs to be redesigned.

Accordions create extra work

Typical example that causes barriers

Contents

Improved version

Contents