Disclosure

On this page

The disclosure component allows users to reveal more information or extra functionality only if they need it.

When to use

To hide functionality that most users will not use.

When not to use

The disclosure component should not be used just to declutter an interface.

If you have functionality that a lot of users will need, the options should not be hidden as a lot of users will miss it. (For example the ‘This advice applies to’ switcher at the top of advice pages now lists all nations as most users missed the drop-down that was there before.)

Examples

Default

Open example in a new tab

Example content

<div class="cads-disclosure js-cads-disclosure">
  <button type="button" class="cads-disclosure__toggle cads-linkbutton js-cads-disclosure-toggle" aria-expanded="false" aria-controls="disclosure-example-default" data-label-when-hiding="Show this section, Filter" data-label-when-showing="Hide this section, Filter" data-open-summary="Filter" data-closed-summary="Filter">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="cads-icon cads-icon--small cads-icon--plus-minus" focusable="false" aria-hidden="true">
      <path class="plus" d="M14 7.5a.5.5 0 0 0-.5-.5H9V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V7H2.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5H7v4.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V9h4.5a.5.5 0 0 0 .5-.5v-1Z" />
      <path class="minus" d="M13.5 7h-11a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5Z" />
    </svg>
    <span class="cads-disclosure__summary js-cads-disclosure-summary">
      Filter
    </span>
  </button>  
  <div class="cads-disclosure__details js-cads-disclosure-details" id="disclosure-example-default">
    <p>Example content</p>
  </div>
</div>

<%= render(CitizensAdviceComponents::Disclosure.new(
  closed_summary: "Filter",
  id: "disclosure-example-default"
)) do %>
  <p>Example content</p>
<% end %>

With open summary

Open example in a new tab

Example content

<div class="cads-disclosure js-cads-disclosure">
  <button type="button" class="cads-disclosure__toggle cads-linkbutton js-cads-disclosure-toggle" aria-expanded="false" aria-controls="disclosure-example-open-summary" data-label-when-hiding="Show" data-label-when-showing="Hide" data-open-summary="Hide" data-closed-summary="Show">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="cads-icon cads-icon--small cads-icon--plus-minus" focusable="false" aria-hidden="true">
      <path class="plus" d="M14 7.5a.5.5 0 0 0-.5-.5H9V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V7H2.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5H7v4.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V9h4.5a.5.5 0 0 0 .5-.5v-1Z" />
      <path class="minus" d="M13.5 7h-11a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5Z" />
    </svg>
    <span class="cads-disclosure__summary js-cads-disclosure-summary">
      Show
    </span>
  </button>  
  <div class="cads-disclosure__details js-cads-disclosure-details" id="disclosure-example-open-summary">
    <p>Example content</p>
  </div>
</div>

<%= render(CitizensAdviceComponents::Disclosure.new(
  closed_summary: "Show",
  open_summary: "Hide",
  id: "disclosure-example-open-summary"
)) do %>
  <p>Example content</p>
<% end %>

With custom ID

Open example in a new tab

Example content

Example content

<div class="cads-disclosure js-cads-disclosure">
  <button type="button" class="cads-disclosure__toggle cads-linkbutton js-cads-disclosure-toggle" aria-expanded="false" aria-controls="disclosure-example-view-1" data-label-when-hiding="Show this section, View" data-label-when-showing="Hide this section, View" data-open-summary="View" data-closed-summary="View">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="cads-icon cads-icon--small cads-icon--plus-minus" focusable="false" aria-hidden="true">
      <path class="plus" d="M14 7.5a.5.5 0 0 0-.5-.5H9V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V7H2.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5H7v4.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V9h4.5a.5.5 0 0 0 .5-.5v-1Z" />
      <path class="minus" d="M13.5 7h-11a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5Z" />
    </svg>
    <span class="cads-disclosure__summary js-cads-disclosure-summary">
      View
    </span>
  </button>  
  <div class="cads-disclosure__details js-cads-disclosure-details" id="disclosure-example-view-1">
    <p>Example content</p>
  </div>
</div>
<div class="cads-disclosure js-cads-disclosure">
  <button type="button" class="cads-disclosure__toggle cads-linkbutton js-cads-disclosure-toggle" aria-expanded="false" aria-controls="disclosure-example-view-2" data-label-when-hiding="Show this section, View" data-label-when-showing="Hide this section, View" data-open-summary="View" data-closed-summary="View">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="cads-icon cads-icon--small cads-icon--plus-minus" focusable="false" aria-hidden="true">
      <path class="plus" d="M14 7.5a.5.5 0 0 0-.5-.5H9V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V7H2.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5H7v4.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V9h4.5a.5.5 0 0 0 .5-.5v-1Z" />
      <path class="minus" d="M13.5 7h-11a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5Z" />
    </svg>
    <span class="cads-disclosure__summary js-cads-disclosure-summary">
      View
    </span>
  </button>  
  <div class="cads-disclosure__details js-cads-disclosure-details" id="disclosure-example-view-2">
    <p>Example content</p>
  </div>
</div>

<%= render(CitizensAdviceComponents::Disclosure.new(
  closed_summary: "View",
  id: "disclosure-example-view-1"
)) do %>
  <p>Example content</p>
<% end %>

<%= render(CitizensAdviceComponents::Disclosure.new(
  closed_summary: "View",
  id: "disclosure-example-view-2"
)) do %>
  <p>Example content</p>
<% end %>

By default, the disclosure details id is generated based on the closed label. Adding a custom id is useful in the cases where there are more than one disclosure per page and it is possible that multiple disclosures would have the same label.

JavaScript behaviour

Targeted content requires some additional JavaScript behaviour which can be initialised with:

import { initDisclosure } from "@citizensadvice/design-system";
initDisclosure();

If JavaScript either fails or is disabled in the users browser the fallback is to show the content as open. Try disabling JavaScript in your browser and reloading this page to see this in action.

Using with Rails

If you are using the citizens_advice_components gem, you can call the component from within a template using:

<%= render(CitizensAdviceComponents::Disclosure.new(
  closed_summary: "Filter",
  id: "disclosure-example-default"
)) do %>
  <p>Example content</p>
<% end %>

Component arguments

The component requires a content block for the main contents along with the following arguments:

Component arguments
Argument Description
Argument closed_summary Description Required, the button text when the component is closed
Argument open_summary Description Optional, if not provided the closed title will be used
Argument id Description Optional, if not provided, the closed title will be used for generating the id of the disclosure details
Argument additional_attributes Description Optional, a hash of additional attributes rendered onto the button, eg { "data-test-id": "my-test-id" }