The Help component lets users show and hide text.

The component opens and closes when a user engages with the question mark button. The component will be closed when a page loads.

{{ aspExample({ code: "<button class=\"asp-help asp-js-toggle-button\" type=\"button\" aria-expanded=\"false\" data-toggle-element=\".hint-example-1\" style=\"display:none\">
<span class=\"sr-only\">Help</span>
<span aria-hidden=\"true\">?</span>
</button>

<!– not part of the nunjucks template –>
<div class=\"hint-example-1\">
<p>Hidden content</p>
</div>", nunjucks: "", json: "", title: "", example: "", id: "66a3a3d25d1a9" }) }}

When to use this component

Use the component to help users understand what information they need to answer a question.

When not to use this component

The Help component hides content from users. It may be that users do not notice the component or understand how it works. For this reason, you should use it sparingly and only in specific situations supported, where possible, by user research.

Before you use this component, consider:

The component was specifically designed for the Assure application.

The application has two audiences: those who know how to use the application, and those who do not. The purpose of the Help component is to reduce the amount of visible content on the page, focusing attention on the question set, while allowing users to interact with support content if they need to.

Our preferred approach for this type of content is to place hint text directly under the question, so users can see it when the page loads.

Example of where we have used is component

This component is used on:

This list is not exhaustive.

Technical notes

This component uses JavaScript. When JavaScript is not available, users will see the content displayed as standard paragraphs.

This component can be used in dark mode.

For users of screen readers, the text in the button will be read as a single statement, and the call-to-action will be announced as ‘button’.

Status of development

The criteria below must be met for a component to be approved for use within the ASP Digital Design System.


{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="status status–green">Completed</span>'}
]
}
]
}) }}