name: Details
description: Make a page easier to scan by letting users reveal more detailed information only if they need it
shared_accessibility_criteria:
  - link
accessibility_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
govuk_frontend_components:
  - details
examples:
  default:
    data:
      title: Help with nationality
      block: |
        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.
  with_data_attributes:
    description: Can be used for tracking. By default, `track-label` is set to the status ("open" or "closed") unless a track_label is passed into the component.
    data:
      title: Help with nationality
      data_attributes:
        track_category: "checker-qa"
        track_action: "business-question"
        track_label: "custom label here"
        track_options:
          dimension20: "custom dimension"
      block: |
        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.
  with_GTM_tracking:
    data:
      title: Help with nationality
      data_attributes:
        tracking: GTM-123AB
      block: |
        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.
  open:
    data:
      title: Help with nationality
      open: true
      block: |
        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.