
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
@springernature/global-expander
Advanced tools
Frontend package for expanding a target when clicking a toggle
Click a trigger element to toggle the display of a unique target element.
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>
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();
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.
FAQs
Frontend package for expanding a target when clicking a toggle
The npm package @springernature/global-expander receives a total of 282 weekly downloads. As such, @springernature/global-expander popularity was classified as not popular.
We found that @springernature/global-expander demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 14 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.