{{ aspExample({ code: &quot;&lt;button class=\&quot;asp-help asp-js-toggle-button\&quot; type=\&quot;button\&quot; aria-expanded=\&quot;false\&quot; data-toggle-element=\&quot;.hint-example-1\&quot; style=\&quot;display:none\&quot;&gt;<br />
  &lt;span class=\&quot;sr-only\&quot;&gt;&lt;/span&gt;<br />
  &lt;span aria-hidden=\&quot;true\&quot;&gt;?&lt;/span&gt;<br />
&lt;/button&gt;<br />
<br />
&lt;!&#8211; not part of the nunjucks template &#8211;&gt;<br />
&lt;div class=\&quot;hint-example-1\&quot;&gt;<br />
  &lt;p&gt;Hidden content&lt;/p&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;66a3a3d25d1a9&quot; }) }}


<h2 class="wp-block-heading">Help with expanded content</h2>


 {{ aspExample({ code: &quot;&lt;button class=\&quot;asp-help asp-js-toggle-button\&quot; type=\&quot;button\&quot; aria-expanded=\&quot;false\&quot; data-toggle-element=\&quot;.hint-example-2\&quot; style=\&quot;display:none\&quot;&gt;<br />
  &lt;span class=\&quot;sr-only\&quot;&gt;&lt;/span&gt;<br />
  &lt;span aria-hidden=\&quot;true\&quot;&gt;?&lt;/span&gt;<br />
&lt;/button&gt;<br />
<br />
&lt;!&#8211; not part of the nunjucks template &#8211;&gt;<br />
&lt;div class=\&quot;hint-example-2\&quot;&gt;<br />
  &lt;p&gt;Hidden content&lt;/p&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;66e024995cf4f&quot; }) }}


<p>WIP &#8211; 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 &#8211; 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)</p>



<p></p>


<br />
 {{ aspTable({<br />
  head: [<br />
    { text: &#039;Development criteria&#039;}, <br />
    { text: &#039;Status&#039;}<br />
  ],<br />
  rows: [<br />
    {<br />
      cells: [<br />
        { text: &#039;WCAG 2.2 compliant&#039;},<br />
        { html: &#039;&lt;span class=&quot;status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;WCAG 2.1 compliant&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&#8211;green&quot;&gt;Completed&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;HTML / Nunjucks version&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&#8211;green&quot;&gt;Completed&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;Figma version&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;M365 versions&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;Documentation&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&#8211;yellow&quot;&gt;In progress&lt;/span&gt;&#039;}<br />
      ]<br />
    }<br />
  ]<br />
}) }}<br />
<br />