Components

Details

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

<div class="app-example app-example--tabs">
  <div class="app-example__toolbar">
    <a href="/components/details/default/index.html" class="app-example__new-window" target="_blank">
      Open this
      <span class="govuk-visually-hidden">details</span>
      example in a new tab
    </a>
  </div>
  <iframe title="Details example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/details/default/index.html" frameBorder="0" loading="lazy"></iframe>
</div>

<span id="options-details-example"></span>
<ul class="app-tabs" role="tablist">
  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#details-example-html" role="tab" aria-controls="details-example-html" data-track="tab-html">HTML</a></li>
  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#details-example-nunjucks" role="tab" aria-controls="details-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>

  <div class="app-tabs__heading js-tabs__heading"><a href="#details-example-html" aria-controls="details-example-html" data-track="tab-html">HTML</a></div>

<div class="app-tabs__container js-tabs__container" id="details-example-html" role="tabpanel">
  <div class="app-example__code">
    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">details</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-details&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-details&quot;</span>&gt;</span>

<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’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post. </div> </details>

  <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#details-example-nunjucks" aria-controls="details-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
<div class="app-tabs__container js-tabs__container" id="details-example-nunjucks" role="tabpanel">
    

    <details class="govuk-details app-options" data-module="govuk-details" id="options-details-example-details">

Nunjucks macro options

      <p>
      Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
      </p>
      <p>
      Some options are required for the macro to work; these are marked as "Required" in the option description.
      </p>
      <p>
      If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against  <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
      </p>
      
        <table class="govuk-table app-options__table" id="options-details-example--primary">
          <caption class="govuk-table__caption govuk-heading-m  govuk-visually-hidden">Primary options</caption>
          <thead class="govuk-table__head">
            <tr class="govuk-table__row">
              <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
              <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
              <th class="govuk-table__header" scope="col">Description</th>
            </tr>
          </thead>
          <tbody class="govuk-table__body">
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">summaryText</th>
                <td class="govuk-table__cell ">string</td>
                <td class="govuk-table__cell ">
                  
                    <strong>Required.</strong>
                  
                  If <code>summmaryHtml</code> is set, this is not required. Text to use within the summary element (the visible part of the details element). If <code>summaryHtml</code> is provided, the <code>summaryText</code> option will be ignored.
                  
                  </td>
              </tr>
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">summaryHtml</th>
                <td class="govuk-table__cell ">string</td>
                <td class="govuk-table__cell ">
                  
                    <strong>Required.</strong>
                  
                  If <code>summmaryText</code> is set, this is not required. HTML to use within the summary element (the visible part of the details element). If <code>summaryHtml</code> is provided, the <code>summaryText</code> option will be ignored.
                  
                  </td>
              </tr>
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">text</th>
                <td class="govuk-table__cell ">string</td>
                <td class="govuk-table__cell ">
                  
                    <strong>Required.</strong>
                  
                  If <code>html</code> is set, this is not required. Text to use within the disclosed part of the details element. If <code>html</code> is provided, the <code>text</code> option will be ignored.
                  
                  </td>
              </tr>
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">html</th>
                <td class="govuk-table__cell ">string</td>
                <td class="govuk-table__cell ">
                  
                    <strong>Required.</strong>
                  
                  If <code>text</code> is set, this is not required. HTML to use within the disclosed part of the details element. If <code>html</code> is provided, the <code>text</code> option will be ignored.
                  
                  </td>
              </tr>
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">caller</th>
                <td class="govuk-table__cell ">nunjucks-block</td>
                <td class="govuk-table__cell ">
                  
                  Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire details component in a <code>call</code> block.
                  
                  </td>
              </tr>
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">id</th>
                <td class="govuk-table__cell ">string</td>
                <td class="govuk-table__cell ">
                  
                  ID to add to the details element.
                  
                  </td>
              </tr>
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">open</th>
                <td class="govuk-table__cell ">boolean</td>
                <td class="govuk-table__cell ">
                  
                  If <code>true</code>, details element will be expanded.
                  
                  </td>
              </tr>
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">classes</th>
                <td class="govuk-table__cell ">string</td>
                <td class="govuk-table__cell ">
                  
                  Classes to add to the <code>&lt;details&gt;</code> element.
                  
                  </td>
              </tr>
            <tr class="govuk-table__row">
                <th class="govuk-table__header" scope="row">attributes</th>
                <td class="govuk-table__cell ">object</td>
                <td class="govuk-table__cell ">
                  
                  HTML attributes (for example data attributes) to add to the <code>&lt;details&gt;</code> element.
                  
                  </td>
              </tr>
            
          </tbody>
        </table>

  <div class="app-example__code">
    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/details/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukDetails %}

{{ govukDetails({ summaryText: "Help with nationality", text: "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." }) }}