@springernature/global-expander NPM

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