# @springernature/global-expander

> Frontend package for expanding a target when clicking a toggle

Latest version **4.2.2** (published 2022-02-18) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @springernature/global-expander
pnpm add @springernature/global-expander
yarn add @springernature/global-expander
bun add @springernature/global-expander
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 4.2.2 |
| Published | 2022-02-18 |
| First published | 2019-11-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 60.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | benjclark, sonniesedge, rlau, dotcode, joseluisbolos, hollsk, moddular, jpw, nickcall, howlingmad, sndigital, davidpauljunior, morgaan, nasiamakryg |

## Links

- npm: https://www.npmjs.com/package/@springernature/global-expander
- npm.io page: https://npm.io/package/@springernature/global-expander

## Dependencies (1)

- [@springernature/global-javascript](https://npm.io/package/@springernature/global-javascript.md) ^3.0.2

## Recent versions

- 4.2.2 (latest) — 2022-02-18
- 4.2.1 — 2021-10-25
- 4.2.0 — 2021-10-22
- 4.1.0 — 2021-09-21
- 4.0.2 — 2021-04-15
- 4.0.1 — 2021-02-15
- 4.0.0 — 2021-02-03
- 3.0.2 — 2020-11-19
- 3.0.1 — 2020-11-16
- 3.0.0 — 2020-10-20
- 2.1.0 — 2020-09-22
- 2.0.2 — 2020-07-29
- 2.0.1 — 2020-07-21
- 2.0.0 — 2020-07-17
- 1.2.0 — 2020-07-06
- … 9 more at https://npm.io/package/@springernature/global-expander/versions

## README

# Global Expander

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

## Usage

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

expander(options);
```

```html
<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:

```javascript
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 |
|--------------------|---------------|---------|------------------------------------------------------------------------------------------------------------------------------------|
| 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

- [plugin-transform-object-assign](https://babeljs.io/docs/en/babel-plugin-transform-object-assign)

---
_Source: https://npm.io/package/@springernature/global-expander · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._