Origami Frontend Components & Services

Demos: o-toggle

This version of o-toggle hasn't been branded yet. Please check the latest version, 2.1.2, as branding is a relatively new addition to our components.

Toggle display on/off.

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>

Toggle visibility.

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>
Support Status
active
Switch component view

GitHub Repository

Install o-toggle

If using the Build Service, add o-toggle@^2.0.3 to your script and link tags.

If running a Manual Build, run bower install --save "o-toggle@^2.0.3".

Help & Support

o-toggle is maintained directly by the Origami team. If you have any questions about o-toggle or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com