Expander (experimental)
A block of content that can be expanded and collapsed.
How it looks (preview) (preview all)
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
Expand by default (preview)
Shows the content by default. It can still be hidden.
<%= 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 margin bottom (preview)
The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. It defaults to a margin bottom of 0.
<%= render "components/expander", {
title: "Person",
margin_bottom: 9
} 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.
<%= 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="Sub-topic">
<div class="govuk-form-group gem-c-select">
<label class="govuk-label" for="level_two_taxon">Sub-topic</label>
<select name="level_two_taxon" id="level_two_taxon" class="govuk-select gem-c-select__select--full-width">
<option value="">All sub-topics</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.
<%= render "components/expander", {
title: "Organisation",
button_data_attributes: {
ga4_expandable: "",
ga4_event: {
event_name: "select_content",
type: "finder"
}
}
} do %>
Sssh I'm hiding
<% end %>