Details

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

Details with text arguments

The summary_text argument controls the details element’s label and text sets the content.

Input

= govuk_details(summary_text: summary_text, text: text)

<%= govuk_details(summary_text: summary_text, text: text) %>

{
  summary_text: "Help with nationality",
  text: "We need to know your nationality so we can work out which elections you can vote in."
}

Output

Help with nationality

We need to know your nationality so we can work out which elections you can vote in.

<details class="govuk-details">
  <summary class="govuk-details__summary">
    <span class="govuk-details__summary-text">
      Help with nationality
    </span>
  </summary>
  <div class="govuk-details__text">
    We need to know your nationality so we can work out which elections you can vote in.
  </div>
</details>

Details with a block

When the details element contains multiple lines of text or more complex content, the body can be provided using a block.

Input

= govuk_details(summary_text: "Help with nationality") do
  p
    | We need to know your nationality so we can work out which elections
      you’re entitled to vote in.

  p
    | If you cannot provide your nationality, you’ll have to send copies of
      identity documents through the post.

<%= govuk_details(summary_text: "Help with nationality") do %>
  <p>
    We need to know your nationality so we can work out which elections
    you’re entitled to vote in.
  </p>
  <p>
    If you cannot provide your nationality, you’ll have to send copies of
    identity documents through the post.
  </p>
<% end %>

Output

Help with nationality

We need to know your nationality so we can work out which elections you’re entitled to vote in.

If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.

<details class="govuk-details">
  <summary class="govuk-details__summary">
    <span class="govuk-details__summary-text">
      Help with nationality
    </span>
  </summary>
  <div class="govuk-details__text">
    <p>
      We need to know your nationality so we can work out which elections
      you’re entitled to vote in.
    </p>
    <p>
      If you cannot provide your nationality, you’ll have to send copies of
      identity documents through the post.
    </p>
  </div>
</details>

Details that start open

You can make a details element start open by passing in open: true.

Input

= govuk_details(summary_text: summary_text, text: text, open: true)

<%= govuk_details(summary_text: summary_text, text: text, open: true) %>

{
  summary_text: "Help with nationality",
  text: "We need to know your nationality so we can work out which elections you can vote in."
}

Output

Help with nationality

We need to know your nationality so we can work out which elections you can vote in.

<details open="open" class="govuk-details">
  <summary class="govuk-details__summary">
    <span class="govuk-details__summary-text">
      Help with nationality
    </span>
  </summary>
  <div class="govuk-details__text">
    We need to know your nationality so we can work out which elections you can vote in.
  </div>
</details>