Toggler

Examples

1. Global toggle - off-canvas menu

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
    });
});