Details

<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

Track when users open and close a details component by tracking the clicks on the link text. Use the original page path, click text, and a data attribute showing the action.

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