Accordion (experimental) example

With supplied identification

An id for an individual accordion is optional as it’s automatically generated, but it can be supplied if a specific id is required.

The id must be unique across the domain of your service. This is because the open or closed state of individual instances of the accordion uses localStorage to persist across page loads.

Used as an id in the HTML for the accordion as a whole, and also as a prefix for the ids of the section contents and the buttons that open them, so that those ids can be the target of aria-control attributes.

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(5) > .govuk-accordion__section-header > .govuk-accordion__section-heading

How to call this example

<%= render "govuk_publishing_components/components/accordion", {
  id: "with-supplied-id-thats-unique-across-the-domain",
  items: [
    {
      heading: {
        text: "Writing well for the web"
      },
      content: {
        html: sanitize("<p class=\"govuk-body\">This is the content for Writing well for the web.</p>")
      }
    },
    {
      heading: {
        text: "Writing well for specialists"
      },
      content: {
        html: sanitize("<p class=\"govuk-body\">This is the content for Writing well for specialists.</p>")
      }
    },
    {
      heading: {
        text: "Know your audience"
      },
      content: {
        html: sanitize("<p class=\"govuk-body\">This is the content for Know your audience.</p>")
      }
    },
    {
      heading: {
        text: "How people read"
      },
      content: {
        html: sanitize("<p class=\"govuk-body\">This is the content for How people read.</p>")
      }
    }
  ]
} %>