Accordion (experimental) example

Default

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