{{ aspExample({ code: &quot;&lt;button class=\&quot;asp-help asp-js-toggle-button\&quot; type=\&quot;button\&quot; aria-expanded=\&quot;false\&quot; aria-label=\&quot;Show help\&quot; data-toggle-element=\&quot;.hint-example-1\&quot; data-toggle-text=\&quot;help\&quot;&gt;<br />
  &lt;span class=\&quot;sr-only\&quot;&gt;Help&lt;/span&gt;<br />
  &lt;span aria-hidden=\&quot;true\&quot;&gt;?&lt;/span&gt;<br />
&lt;/button&gt;<br />
<br />
&lt;div class=\&quot;hint-example-1\&quot;&gt;<br />
  &lt;p&gt;Content&lt;/p&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;{{ aspHelp({<br />
  targetElement: \&quot;.hint-example-1\&quot;,<br />
  aria: \&quot;Help\&quot;<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;66a3a3d25d1a9&quot;, url: &quot;&quot; }) }}


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


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspHelp({<br />
  targetElement: \&quot;.hint-example-1b\&quot;,<br />
  expanded: true,<br />
  aria: \&quot;Help\&quot;<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;66e024995cf4f&quot;, url: &quot;&quot; }) }}


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


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspHelp({<br />
  targetElement: \&quot;#hint-example-2\&quot;,<br />
  closeElements: [\&quot;.hint-example-1\&quot;, \&quot;.hint-example-2\&quot;],<br />
  aria: \&quot;Hint\&quot;<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;66e024995d2c5&quot;, url: &quot;&quot; }) }}


<p>WIP &#8211; Tied in with JS toggle functionality (This is hardcoded HTML like the cookie banner)</p>



<p>Non JS if the content isn&#8217;t hidden it should show</p>