Accordion (experimental) example

Different heading level

This will alter the level of the heading, not the appearance of the 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(5) > .govuk-accordion__section-header > h3

How to call this example

<%= render "govuk_publishing_components/components/accordion", {
  heading_level: 3,
  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>")
      }
    }
  ]
} %>