This toggle target has a class "o-toggle-display" which hides it until clicking the toggle updates its aria attributes and adds the "o-toggle--active" class.
<button
data-o-component="o-toggle"
data-o-toggle-target="#demo-target"
class="o-buttons o-buttons--primary"
>
display toggle
</button>
<div id="demo-target" class="o-toggle o-toggle-display">
Target of the toggle
</div>
This toggle target has a class "o-toggle-visibility" which visually hides it, whilst still occupying space, until clicking the toggle updates its aria attributes and adds the "o-toggle--active" class.
<button
data-o-component="o-toggle"
data-o-toggle-target="#demo-target"
class="o-buttons o-buttons--primary"
>
visibility toggle
</button>
<div id="demo-target" class="o-toggle o-toggle-visibility">
Target of the toggle
</div>