4.6 components.hidden Hidden
Toggle example guides Toggle HTML markup
Hide elements from all users. Compare to the visually-hidden component.
Used for elements which should not be immediately displayed to any user. An example would be a collapsible fieldset that will be expanded with a click from a user.
For anything you want to hide on page load when JavaScript is enabled, use
the .js-hidden
class.
Example
This content is hidden.
Markup: components/hidden/hidden.twig
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hidden </span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span>
This content is hidden.
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</span>
Source:
components/hidden/_hidden.scss
, line 1