https://github.com/nath-green/state-toggler
Toggle data state attribute
https://github.com/nath-green/state-toggler
javascript npm-package
Last synced: 2 days ago
JSON representation
Toggle data state attribute
- Host: GitHub
- URL: https://github.com/nath-green/state-toggler
- Owner: nath-green
- Created: 2018-08-07T10:21:55.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-18T19:10:11.000Z (over 6 years ago)
- Last Synced: 2025-03-18T14:11:28.756Z (3 months ago)
- Topics: javascript, npm-package
- Language: JavaScript
- Size: 3.91 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## State Toggler
Toggle data state attribute
### Installation
`npm install state-toggler`
`import { stateToggler } from 'state-toggler'` or `const stateToggler = require('state-toggler')`
------
### Usage
`stateToggler(selector, options)`
The function takes two parameters, a **selector** and an **options** `{}`. This function is used to toggle a data attribute, similar to the toggleClass jQuery method. This is based on a pattern that uses data attributes to control state based styling.
If the data attribute (**data-state** by default) is set to **open**, the attribute will be toggled to **closed**.
| Parameter | Usage |
|--|--|
| selector | target element |
| options (optional) | override default options |


#### Options


| Option | Type | Default |
|--|--|--|
| attr | string | data-state |
| states | array (max 2) | open, closed |
---
### Examples
#### Default
JS
```
stateToggler('.modal')
```
HTML
```
```
SCSS
```
.modal {
width: 400px;
height: 400px;
&[data-state="closed"] {
display: none;
}
&[data-state="open"] {
display: block;
}
}
```


#### With options
This will toggle `.nav-panel` between `collapsed` and `expanded` using the `data-state` attribute.
JS
```
stateToggler('.nav-panel', {
states: ['collapsed', 'expanded']
})
```
HTML
```
```
SCSS
```
.nav-panel {
position: absolute;
width: 400px;
&[data-state="collapsed"] {
right: -400px;
}
&[data-state="expanded"] {
right: 0;
}
}
```