Details example

With data attributes

Data attributes can be applied to the summary element of the component.

This can be used for tracking as shown. Custom JavaScript in the component fires tracking events when the details element is opened and closed. By default, track-label is set to the status (open or closed) unless a track_label is passed into the component.

How it looks (preview)

Help with nationality

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.

How to call this example

<%= render "govuk_publishing_components/components/details", {
  title: "Help with nationality",
  data_attributes: {
    track_category: "checker-qa",
    track_action: "business-question",
    track_label: "custom label here",
    track_options: {
      dimension20: "custom dimension"
    }
  }
} do %>
  We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
<% end %>