Component

Expander (experimental)

A block of content that can be expanded and collapsed.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Organisation

This is some content that is passed to the component. It should be distinct from the component, in that the component should not style or interact with it, other than to show and hide it.

How to call this component

<%= render "components/expander", {
  title: "Organisation"
} do %>
  This is some content that is passed to the component. It should be distinct from the component, in that the component should not style or interact with it, other than to show and hide it.
<% end %>

Accessibility acceptance criteria

The component must:

  • indicate that it is expandable/collapsible
  • indicate the initial state of expandable content
  • indicate where the state of expandable content has changed
  • be operable with a keyboard
  • be expanded by default without Javascript enabled

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

  • id - accepts a string for the element ID attribute
  • data_attributes - accepts a hash of data attributes
  • aria - accepts a hash of aria attributes
  • classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
  • margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale (defaults to no margin)
  • role - accepts a space separated string of roles
  • lang - accepts a language attribute value
  • open - accepts an open attribute value (true or false)
  • hidden - accepts an empty string, ‘hidden’, or ‘until-found’
  • tabindex - accepts an integer. The integer can also be passed as a string
  • dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
  • type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
  • rel - accepts any valid rel attribute e.g. ‘nofollow’
  • target - accepts a valid target attribute e.g. ‘_blank’
  • title - accepts any string
  • draggable - accepts a draggable attribute value (“true” or “false”)

Expand by default (preview)

Shows the content by default. It can still be hidden.

Location

This is some content that is passed to the component. It should be distinct from the component, in that the component should not style or interact with it, other than to show and hide it. 
<%= render "components/expander", {
  title: "Location",
  open_on_load: true
} do %>
  This is some content that is passed to the component. It should be distinct from the component, in that the component should not style or interact with it, other than to show and hide it.
<% end %>

With counter (preview)

If there are form elements within the expander it can display a count of the number of form elements with a selected or input value. This is to make it appear the same as the option select component when appearing with it in search pages. Note that if any form elements are selected on page load, the component will expand by default.

Things 

<%= render "components/expander", {
  title: "Things"
} do %>
  <div class="govuk-form-group gem-c-select">
  <label class="govuk-label" for="level_one_taxon">Topic</label>
  <select name="level_one_taxon" id="level_one_taxon" class="govuk-select gem-c-select__select--full-width">
    <option value="">All topics</option>
    <option value="1" selected>Business and industry</option>
    <option value="2">COVID-19</option>
    <option value="3">Corporate information</option>
  </select>
</div>
<div class="govuk-form-group" data-ga4-section="Subtopic">
  <div class="govuk-form-group gem-c-select">
    <label class="govuk-label" for="level_two_taxon">Subtopic</label>
    <select name="level_two_taxon" id="level_two_taxon" class="govuk-select gem-c-select__select--full-width">
      <option value="">All subtopics</option>
      <option value="2">Business and the environment</option>
      <option value="3">Business regulation</option>
      <option value="4">Charities and social enterprises</option>
    </select>
  </div>
</div>
<div class="govuk-form-group">
  <label for="public_timestamp[from]" class="gem-c-label govuk-label">Updated after</label>
  <input aria-describedby="hint-fe643477" class="gem-c-input govuk-input" id="public_timestamp[from]" name="public_timestamp[from]" spellcheck="false" type="text" value="2023">
</div>
<% end %>

With button data attributes (preview)

Allows data attributes to be passed to the component to be added to the expand/collapse button. The attributes are written to the parent element then read by the JavaScript and applied to the button. This is used for tracking purposes.

Organisation

Sssh I'm hiding 
<%= render "components/expander", {
  title: "Organisation",
  button_data_attributes: {
    ga4_expandable: "",
    ga4_event: {
      event_name: "select_content",
      type: "finder"
    }
  }
} do %>
  Sssh I'm hiding
<% end %>