@springernature/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:

```javascript
expander.open();
expander.close();

Options

| 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

• plugin-transform-object-assign