Component
Details
Make a page easier to scan by letting users reveal more detailed information only if they need it
How it looks (preview) (preview all)
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 component
<%= render "govuk_publishing_components/components/details", {
title: "Help with nationality"
} 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 %>GOV.UK Design System
This component incorporates components from the GOV.UK Design System:
Accessibility acceptance criteria
The component must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- be usable with touch
- indicate when it has focus
- toggle the visibility of the details element’s content when interacted with
- indicate the expanded state when details’ content is visible
- indicate the collapsed state when details’ content is hidden
Links in the component must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- indicate when they have focus
- change in appearance when touched (in the touch-down state)
- change in appearance when hovered
- be usable with touch
- be usable with voice commands
- have visible text
- have meaningful text
Other examples
With data attributes (preview)
Can be used for tracking. Tracking is applied to the summary element 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.
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.
<%= 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"
},
details_track_click: ""
}
} 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 %>With gtm tracking (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.
<%= render "govuk_publishing_components/components/details", {
title: "Help with nationality",
data_attributes: {
tracking: "GTM-123AB",
details_track_click: ""
}
} 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 %>Open (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.
<%= render "govuk_publishing_components/components/details", {
title: "Help with nationality",
open: true
} 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 %>