Origami Frontend Components & Services

Readme: o-toggle

This utility component adds toggle (show/hide) behaviour to a <button> or <a> tag and a target.

Quick start

Install the module:

bower install --S o-toggle

Load the JavaScript:

const oToggle = require('o-toggle');

oToggle.init();

Add some markup:

<button data-o-component="o-toggle" data-o-toggle-target=".my-toggle-target">My button</button>
<div class='my-toggle-target'>Some toggleable content</div>

Usage

JavaScript

An o-toggle object must be constructed for every element you have on your page that uses this module. You can do this for explicitly classed elements like so:

const OToggle = require('o-toggle');
const toggleEl = document.querySelector('.o-toggle');
const toggle = new OToggle(toggleEl, {
        target: '.my-target',
        callback: function(state, event) {
            if (state === 'open') {
                console.log('Target opened');
            } else if (state === 'close') {
                console.log('Target closed');
            }
        }
    });

Alternatively, an o.DOMContentLoaded event can be dispatched on the document to auto-construct an o-toggle object for each element with a data-o-component="o-toggle" attribute:

require('o-toggle');
document.addEventListener("DOMContentLoaded", function() {
    document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
});

A second parameter can be passed to the oToggle constructor or to the .init() function with a config object that has the following options:

Markup

All config options can also be passed as data attributes. These are:

Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


Licence

This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub Repository

Install o-toggle

If using the Build Service, add o-toggle@^1.1.10 to your script tag.

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

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