Help

WIP -- This is used toggle hints on forms, where there is the combination of an excessive amount of questions with long copy within the hint text

<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"></span>  
  <span aria-hidden="true">?</span>  
</button>  

<!-- not part of the nunjucks template -->
<div class="hint-example-1">
  <p>Hidden content</p>
</div>

Help with expanded content

<button class="asp-help asp-js-toggle-button" type="button" aria-expanded="false" data-toggle-element=".hint-example-2" style="display:none">  
  <span class="sr-only"></span>  
  <span aria-hidden="true">?</span>  
</button>  

<!-- not part of the nunjucks template -->
<div class="hint-example-2">
  <p>Hidden content</p>
</div>

WIP -- This toggle functionality uses JavaScript. If JavaScript is enabled, the button is hidden, on page load JavaScript checks for the corresponding content. If the corresponding content is found, the button is unhidden and the content is either shown or hidden, depending upon the aria-expanded attribute set on the button. If JavaScript is disabled, the button remains hidden and content visible. (Same as Filter and Steps. Header -- not yet documented, will utilise the same JavaScript functionality with an addition data attribute to hide other content when a button is pressed. See also tabs)

Published 26 July 2024
Last updated 26 June 2025