Frontend package for expanding a target when clicking a toggle

Downloads in past


4.2.2a year ago3 years agoMinified + gzip package size for @springernature/global-expander in KB


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


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


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


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


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



| Option | Default Value | Type | Description | |--------------------|---------------|---------|------------------------------------------------------------------------------------------------------------------------------------| | TARGETHIDECLASS | 'u-js-hide' | String | HTML class to be toggled on the target | | TRIGGEROPENCLASS | - | String | HTML class to be toggled to the trigger | | TRIGGEROPENLABEL | - | String | Text to set on the trigger when open | | CLOSEONFOCUSOUT | 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 | | OPENEVENT | false | Boolean | Dispatch custom event on trigger once Global Expander has completed it's Open method | | DEFAULTOPEN | 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