Accordion Nunjucks macro options

Use options to customise the appearance, content and behaviour of this component when using a macro, for example, changing the text.

Also see the guidance on the Accordion component page, which shows these options in use within each example.

Some options are required for the macro to work; these are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string Required. Must be unique across the domain of your service if rememberExpanded is true (as the expanded state of individual instances of the component persists across page loads using session storage). Used as an id in the HTML for the accordion as a whole, and also as a prefix for the ids of the section contents and the buttons that open them, so that those ids can be the target of aria-control attributes.
headingLevel integer Heading level, from 1 to 6. Default is 2.
classes string Classes to add to the accordion.
attributes object HTML attributes (for example data attributes) to add to the accordion.
rememberExpanded boolean Whether the expanded/collapsed state of the accordion should be saved when a user leaves the page and restored when they return. Default is true.
hideAllSectionsText string The text content of the ‘Hide all sections’ button at the top of the accordion when all sections are expanded.
hideSectionText string The text content of the ‘Hide’ button within each section of the accordion, which is visible when the section is expanded.
hideSectionAriaLabelText string Text made available to assistive technologies, like screen-readers, as the final part of the toggle’s accessible name when the section is expanded. Defaults to "Hide this section".
showAllSectionsText string The text content of the ‘Show all sections’ button at the top of the accordion when at least one section is collapsed.
showSectionText string The text content of the ‘Show’ button within each section of the accordion, which is visible when the section is collapsed.
showSectionAriaLabelText string Text made available to assistive technologies, like screen-readers, as the final part of the toggle’s accessible name when the section is collapsed. Defaults to "Show this section".
items array Required. The sections within the accordion. See macro options for items.
Options for items array objects
Name Type Description
heading object Required. The heading of each accordion section. See macro options for items heading.
summary object The summary line of each accordion section. See macro options for items summary.
content object Required. The content of each accordion section. See macro options for items content.
expanded boolean Sets whether the section should be expanded when the page loads for the first time. Defaults to false.
Options for items heading object
Name Type Description
text string Required. If html is set, this is not required. The heading text of each section. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. The heading HTML content of each section. The header is inside the HTML <button> element, so you can only add phrasing content to it. If html is provided, the text option will be ignored.
Options for items summary object
Name Type Description
text string The summary line text content of each section. If html is provided, the text option will be ignored.
html string The summary line HTML content of each section. The summary line is inside the HTML <button> element, so you can only add phrasing content to it. If html is provided, the text option will be ignored.
Options for items content object
Name Type Description
text string Required. If html is set, this is not required. The text content of each section, which is hidden when the section is closed. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. The HTML content of each section, which is hidden when the section is closed. If html is provided, the text option will be ignored.