Component

Details

Make a page easier to scan by letting users reveal more detailed information only if they need it

Search for usage of this component on GitHub.

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

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

  • id - accepts a string for the element ID attribute
  • data_attributes - accepts a hash of data attributes
  • aria - accepts a hash of aria attributes
  • classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
  • margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale
  • role - accepts a space separated string of roles
  • lang - accepts a language attribute value
  • open - accepts an open attribute value (true or false)
  • hidden - accepts an empty string, ‘hidden’, or ‘until-found’
  • tabindex - accepts an integer. The integer can also be passed as a string
  • dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
  • type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
  • rel - accepts any valid rel attribute e.g. ‘nofollow’
  • target - accepts a valid target attribute e.g. ‘_blank’
  • title - accepts any string
  • draggable - accepts a draggable attribute value (“true” or “false”)

With aria attributes (preview)

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

Attorney General's office

Works with 2 agencies and public bodies
  • Department 1
  • Department 2
<div>
  <p class="govuk-body">Attorney General's office</p>
  <%= render "govuk_publishing_components/components/details", {
  title: "Works with 2 agencies and public bodies",
  summary_aria_attributes: {
    label: "Attorney General's office"
  }
} do %>
  <ul>
  <li>Department 1</li>
  <li>Department 2</li>
</ul>
<% end %>
</div>

With ga4 tracking (preview)

GA4 tracking is mostly handled internally by the component, apart from the required attribute index_section_count. This records the number of details components on the page and must be passed by the hosting application. Other GA4 attributes can also be passed if required, including to override attributes set by the component (for some reason this doesn’t work in the component guide but works in applications).

The tracking automatically includes index_section as the index of the component on the page compared with other instances of the component that are also being tracked, e.g. the first details component on a page will be index_section 1, the second index_section 2, etc.

Link tracking for the contents of the details component is not included due to varying tracking requirements. If you need to track links in the component, wrap it in the application with the GA4 link tracker.

What did the ground say to the train?
Between you and me, I've been tracked. 
<%= render "govuk_publishing_components/components/details", {
  title: "What did the ground say to the train?",
  ga4_attributes: {
    index_section_count: 6,
    type: "not the default"
  }
} do %>
  Between you and me, I've been tracked.
<% end %>

Disable ga4 tracking (preview)

Disables GA4 tracking on the component. Tracking is enabled by default.

No tracking here
Or here, but thanks for looking. 
<%= render "govuk_publishing_components/components/details", {
  title: "No tracking here",
  disable_ga4: true
} do %>
  Or here, but thanks for looking.<% 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 %>