Accordion (experimental) example

With custom data module

The component includes its own data-module but others can be passed in addition if required, for example to apply tracking to an element. This will be included along with the components own data-module.

How it looks (preview)

Writing well for the web

This is the content for Writing well for the web.

Writing well for specialists

This is the content for Writing well for specialists.

How to call this example

<%= render "govuk_publishing_components/components/accordion", {
  data_attributes: {
    module: "gem-track-click"
  },
  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>")
      }
    }
  ]
} %>