We use cookies to collect anonymous data to help us improve your site browsing experience.

Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.

Set cookie preferences

Your cookie preferences have been saved. You can change your cookie settings at any time.

Help us improve the Design System by taking our short survey.

Components

Details

Published
31 October 2023
Keep pages simple by allowing users to reveal more detailed information if they need it
Open this example in a new window

Sample HTML 

<details class="ds_details">
    <summary class="ds_details__summary">
        I cannot sign in
    </summary>
    <div class="ds_details__text">
        <p>Contact the design system team if you cannot sign in.</p>

        <p>Email <a href="mailto:designsystem@gov.scot">designsystem@gov.scot</a>.</p>
        <p>Or phone 0000 123 4567<br>
            Monday to Friday, 9am to 5pm</p>
    </div>
</details>

About this component

The details component is a short link that reveals more text when a user clicks on it.

Users can open and close the component.

The details component is the Design System's implementation of the HTML 'details' element. The component replicates the 'details' element's functionality for older browsers.

When to use this component

Use this component when there is information on the page that only some users will need.

Hiding content in the details component makes pages shorter and easier to scan.

Do not use the details component to hide content that most of your users will need.

Decide between details, accordions or tabs

Accordions and tabs also hide information that users can choose to reveal.

Use the details component instead of accordions or tabs if you only have one section of content to hide.

Write clear link text

Write short, descriptive link text for the details component. This helps users understand if they need to click on it.

Research and testing

There are potential usability and accessibility issues with the details component.

Find out about research on the details component on the GOV.UK Design System.

Website analytics

You can track when users open and close a details component by tracking the clicks on the link text.

You can use:

  • the original page path
  • the selected text (also known as 'click text')
  • a data attribute showing the action

The Design System’s ‘tracking’ script adds these data attributes.

Tracking attributes

Details 'summary' elements get a data-accordion attribute. Its value uses the pattern detail-[open/close]. Opening and closing a details component updates that data attribute to denote the correct action (opening or closing).

<summary class="ds_details__summary" data-accordion="detail-open">
    I cannot sign in
</summary>

Links in details components get a:

  •  data-navigation attribute of details-link
  • data-section attribute with the detail's summary value
<details class="ds_details" data-module="ds-details" open="">
    <summary class="ds_details__summary" data-accordion="detail-close">
        System requirements
    </summary>
    <div class="ds_details__text">
        Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended. <a href="#" data-navigation="details-link" data-section="System requirements">How to find specifications for your computer</a>.
    </div>
</details>
Back to top