Help
<button class="asp-help asp-js-toggle-button" type="button" aria-expanded="" aria-label="Show help" data-toggle-text="help" data-toggle-element=".hint-example-1">
<span class="sr-only">Help</span>
<span aria-hidden="true">?</span>
</button>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
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.
| Name | Type | Description |
|---|---|---|
| targetElement | string | Required. The element that this button toggles. Can be any element with a unique class or id. For example, ".hint-example-1" or "#hint-example-2". |
| expanded | boolean | The state of the element that this button toggles. if true, the state of the element that this button toggles is expanded on page load. Default values are 'urgent', false (boolean), true (boolean) or null. |
| aria | string | Required. The text that is red out by a screen reader to "Show" or "Hide" the element that this button toggles. |
| closeElements | array or false (boolean) | An array of elements that this button closes when pressed. This can be one or more elements with either a unique class or id. For example, [".hint-example-1", "#hint-example-2"]. Default values are false (boolean) or null. |
{% from "help/macro.njk" import aspHelp %}
{{ aspHelp({
targetElement: ".hint-example-1",
aria: "Help"
}) }}
Help with expanded content
<button class="asp-help asp-js-toggle-button" type="button" aria-expanded="true" aria-label="Hide help" data-toggle-text="help" data-toggle-element=".hint-example-1b">
<span class="sr-only">Help</span>
<span aria-hidden="true">?</span>
</button>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
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.
| Name | Type | Description |
|---|---|---|
| targetElement | string | Required. The element that this button toggles. Can be any element with a unique class or id. For example, ".hint-example-1" or "#hint-example-2". |
| expanded | boolean | The state of the element that this button toggles. if true, the state of the element that this button toggles is expanded on page load. Default values are 'urgent', false (boolean), true (boolean) or null. |
| aria | string | Required. The text that is red out by a screen reader to "Show" or "Hide" the element that this button toggles. |
| closeElements | array or false (boolean) | An array of elements that this button closes when pressed. This can be one or more elements with either a unique class or id. For example, [".hint-example-1", "#hint-example-2"]. Default values are false (boolean) or null. |
{% from "help/macro.njk" import aspHelp %}
{{ aspHelp({
targetElement: ".hint-example-1b",
expanded: true,
aria: "Help"
}) }}
Help with close other content
<button class="asp-help asp-js-toggle-button" type="button" aria-expanded="" aria-label="Show hint" data-toggle-text="hint" data-toggle-element="#hint-example-2" data-toggle-hide-elements=[".hint-example-1",".hint-example-2"]>
<span class="sr-only">Hint</span>
<span aria-hidden="true">?</span>
</button>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
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.
| Name | Type | Description |
|---|---|---|
| targetElement | string | Required. The element that this button toggles. Can be any element with a unique class or id. For example, ".hint-example-1" or "#hint-example-2". |
| expanded | boolean | The state of the element that this button toggles. if true, the state of the element that this button toggles is expanded on page load. Default values are 'urgent', false (boolean), true (boolean) or null. |
| aria | string | Required. The text that is red out by a screen reader to "Show" or "Hide" the element that this button toggles. |
| closeElements | array or false (boolean) | An array of elements that this button closes when pressed. This can be one or more elements with either a unique class or id. For example, [".hint-example-1", "#hint-example-2"]. Default values are false (boolean) or null. |
{% from "help/macro.njk" import aspHelp %}
{{ aspHelp({
targetElement: "#hint-example-2",
closeElements: [".hint-example-1", ".hint-example-2"],
aria: "Hint"
}) }}
WIP -- Tied in with JS toggle functionality (This is hardcoded HTML like the cookie banner)
Non JS if the content isn’t hidden it should show
Published 26 July 2024
Last updated 13 September 2024