toggle-targets
v2.2.1
Published
Toggle another element by data attribute
Downloads
23
Readme
Toggle Targets
Toggle another element by data attribute.
Demo Examples
Install
npm i toggle-targets
HTML
See examples for .. well, examples. But here's the gist of it, and parameters:
<button
data-tt-set="example"
data-tt-toggle="target-1"
>Toggle</button>
<div
data-tt-set="example"
data-tt-target="target-1"
hidden
>
<p>Target element to be toggled</p>
<button data-untoggle-set="example">Close</button
</div>
Attributes for the toggle button
| Attribute | Type | Description | | -------------- | --------------- | -------------------------------------------------- | | data-tt-set | id (unique) | Set of toggles, grouped together | | data-tt-toggle | id (not unique) | ID to toggle, matching the target's data-tt-target |
Attributes for the target element
| Attribute | Type | Description | | -------------- | --------------- | ---------------------------------------------------------- | | data-tt-set | id (unique) | Set of toggles, grouped together | | data-tt-target | id (not unique) | ID for this element, matching the toggle's data-tt-toggle | | data-tt-blur | empty | (optional: default false) Hide when clicking anywhere else |
Optional additional elements
<button data-tt-untoggle>Close</button
<input data-tt-focus />
| Attribute | Type | Description | | ---------------- | -------- | -------------------------------------------- | | data-tt-untoggle | empty | Close the target element which contains this | | data-tt-focus | selector | Focus on a selector within |
SCSS
@import "toggle-targets/src/index";
JS
import { initToggleTargets } from "toggle-targets";
const toggleSets = initToggleTargets();