Origami Frontend Components & Services

Demos: o-toggle

o-toggle hasn't been branded yet, it only supports the master brand. If you would like to discuss having it branded please get in touch with the Origami team.

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>
Switch component view

GitHub Repository

Install o-toggle

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

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

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: #ft-origami
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: #ft-origami
Email: origami.support@ft.com