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

<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

<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

<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>