1. Component Guide
  2. Accordion (experimental)
  3. With track sections
Accordion (experimental) example

With track sections

To switch on Google Analytics for each section, on click, pass track_sections: true the values passed on open will be Event Action: accordionOpened / accordionClosed Event Category: pageElementInteraction and the Event Label being the heading text.

If track_options in an item is set, then it is possible to pass a custom dimension when the section is clicked.

(track_show_all_clicks: true can be added to track the “Show all sections” button as well, if required)

How it looks (preview)

Writing well for the web

This is content for accordion 1 of 2

This content contains a link

Writing well for specialists

This is content for accordion 2 of 2

How to call this example

<%= render "govuk_publishing_components/components/accordion", {
  track_sections: true,
  items: [
    {
      heading: {
        text: "Writing well for the web",
        id: "writing-well-for-the-web-3"
      },
      content: {
        html: sanitize("<p class=\"govuk-body\">This is content for accordion 1 of 2</p><p class=\"govuk-body\">This content contains a <a href=\"#anchor-nav-test\" class=\"govuk-link\">link</a></p>")
      },
      data_attributes: {
        track_options: {
          dimension114: 1
        }
      }
    },
    {
      heading: {
        text: "Writing well for specialists"
      },
      content: {
        html: sanitize("<p class=\"govuk-body\" id=\"anchor-nav-test\">This is content for accordion 2 of 2</p>")
      }
    }
  ]
} %>