Accordion (experimental) example

With summary

Adds a subheading below each section heading.

How it looks (preview)

Heading levels should only increase by one (heading-order) (see guidance)

Possible reasons why:

• Unable to determine previous heading

Element can be found using the selector:

.govuk-accordion__section:nth-child(2) > .govuk-accordion__section-header > .govuk-accordion__section-heading

Heading levels should only increase by one (heading-order) (see guidance)

Possible reasons why:

• Unable to determine previous heading

Element can be found using the selector:

.govuk-accordion__section:nth-child(3) > .govuk-accordion__section-header > .govuk-accordion__section-heading

Heading levels should only increase by one (heading-order) (see guidance)

Possible reasons why:

• Unable to determine previous heading

Element can be found using the selector:

.govuk-accordion__section:nth-child(4) > .govuk-accordion__section-header > .govuk-accordion__section-heading

Heading levels should only increase by one (heading-order) (see guidance)

Possible reasons why:

• Unable to determine previous heading

Element can be found using the selector:

.govuk-accordion__section:nth-child(5) > .govuk-accordion__section-header > .govuk-accordion__section-heading

How to call this example

<%= render "govuk_publishing_components/components/accordion", {
  items: [
    {
      heading: {
        text: "Understanding agile project management"
      },
      summary: {
        text: "Introductions, methods, core features."
      },
      content: {
        html: sanitize("<ul class=\"govuk-list\"> <li> <a class=\"govuk-link\" href=\"#\">Agile and government services: an introduction</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Agile methods: an introduction</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Core principles of agile</a> </li> </ul>")
      }
    },
    {
      heading: {
        text: "Working with agile methods"
      },
      summary: {
        text: "Workspaces, tools and techniques, user stories, planning."
      },
      content: {
        html: sanitize("<ul class=\"govuk-list\"> <li> <a class=\"govuk-link\" href=\"#\">Creating an agile working environment</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Agile tools and techniques</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Set up a team wall</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Writing user stories</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Planning in agile</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Deciding on priorities</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Developing a roadmap</a> </li> </ul>")
      }
    },
    {
      heading: {
        text: "Governing agile services"
      },
      summary: {
        text: "Principles, measuring progress, spending money."
      },
      content: {
        html: sanitize("<ul class=\"govuk-list\"> <li> <a class=\"govuk-link\" href=\"#\">Governance principles for agile service delivery</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Measuring and reporting progress</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Spend controls: check if you need approval to spend money on a service</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Spend controls: apply for approval to spend money on a service</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Spend controls: the new pipeline process</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Working across organisational boundaries</a> </li> </ul>")
      }
    },
    {
      heading: {
        text: "Phases of an agile project"
      },
      summary: {
        text: "Discovery, alpha, beta, live and retirement."
      },
      content: {
        html: sanitize("<ul class=\"govuk-list\"> <li> <a class=\"govuk-link\" href=\"#\">How the discovery phase works</a> </li> <li> <a class=\"govuk-link\" href=\"#\">How the alpha phase works</a> </li> <li> <a class=\"govuk-link\" href=\"#\">How the beta phase works</a> </li> <li> <a class=\"govuk-link\" href=\"#\">How the live phase works</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Retiring your service</a> </li> </ul>")
      }
    }
  ]
} %>