npm.io
4.2.2 • Published 4 years ago

@springernature/global-expander

Licence
MIT
Version
4.2.2
Deps
1
Size
61 kB
Vulns
0
Weekly
0
DeprecatedThis package is deprecated
SummaryDependencyVersions

Global Expander

Click a trigger element to toggle the display of a unique target element.

Usage

import {expander} from 'global-expander/js';

expander(options);
<button id="button1" data-expander data-expander-target="#target1">Expander 1</button>
<div id="target1">Target 1</div>

JavaScript

For more flexibility you can use the Expander class directly:

const trigger = document.querySelector('.my-trigger');
const target = document.querySelector('.my-target');

const myExpander = new Expander(trigger, target, options);

myExpander.init();

You can also manually open and close any instance of expander with:

expander.open();
expander.close();
Options
Option Default Value Type Description
TARGET_HIDE_CLASS 'u-js-hide' String HTML class to be toggled on the target
TRIGGER_OPEN_CLASS - String HTML class to be toggled to the trigger
TRIGGER_OPEN_LABEL - String Text to set on the trigger when open
CLOSE_ON_FOCUS_OUT true Boolean Closes when you click or tab outside of the target
AUTOFOCUS null String Moves focus to an element when hitting trigger:
firstTabbable will find the first tabbable element inside the target (will highlight text if appropriate, e.g. input with value).
target will set focus on target element
OPEN_EVENT false Boolean Dispatch custom event on trigger once Global Expander has completed it's Open method
DEFAULT_OPEN false Boolean Set the expander to be open by default

The data attribute options are the same, but are lowercase and hyphenated (and strings where the option is a boolean):

  • data-expander-target-hide-class
  • data-expander-trigger-open-class
  • data-expander-trigger-open-label
  • data-expander-close-on-focus-out
  • data-expander-autofocus
  • data-expander-open-event
  • data-expander-default-open

Note: data attribute options will take precedence over any options set during initialisation.

Polyfills / Babel plugins required