2.0.0 • Published 6 years ago
state-toggler v2.0.0
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
<div class="modal" data-state="closed"></div>
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
<div class="nav-panel" data-state="collapsed"></div>
SCSS
.nav-panel {
position: absolute;
width: 400px;
&[data-state="collapsed"] {
right: -400px;
}
&[data-state="expanded"] {
right: 0;
}
}