Toggler

Examples

1. Global toggle - off-canvas menu

2. Local toggle

About local toggling

Local toggles change the className of the parentNode rather than the documentElement for isolating state to part of the DOM

Close

Installation

$ npm i -S storm-toggler

Usage

1. Global toggle

HTML

CSS

Sample minimum CSS as an indication how the global toggle works

JS

Either import and initialise using a named import:

import Toggler from 'storm-toggler';
Toggler.init('.js-toggler');

Or async using storm-load.js, add the .standalone file to your project, then initialise using the global name:

Load('/content/js/async/storm-toggler.standalone.js')
.then(() => {
    StormToggler.init('.js-toggler');
});

2. Local toggle

HTML

CSS

Sample minimum CSS as an indication how the local toggle works

JS

Either import and initialise using a named import:

import Toggler from 'storm-toggler';

Toggler.init('.js-toggle__local', {
    local: true
});

Or async using storm-load.js, add the .standalone file to your project, then initialise using the global name:

Load('/content/js/async/storm-toggler.standalone.js')
.then(() => {
    StormToggler.init('.js-toggle__local', {
        local: true
    });
});