A pure javascript utility to easily toggle classes on elements targeted by data attributes
import Toglit from 'toglit'
const toglit = new Toglit();
window.addEventListener('toglitchange', (e) => {
const { change, class } = e.detail;
const { currentTarget } = e;
console.log(`${change}ed ".${class}" "${from}" to "#${currentTarget.id}!"`);
// Added ".in" to "#toggleMe!"
});
<style>
#toggleme {
display:none;
}
#toggleme.in {
display:block;
}
</style>
<button type="button" data-toglit="#toggleme">Toglit!</button>
<div id="toggleme">Lookit me!</div>
These should be set on the firing element (e.g. a button) and will be activated on click. Note that their keys can be changed using the options object (see below) toglit string|element required The target element
toglit-class string The class(es) to be toggled on the target element
toglit-triggers string The trigger(s) to be toggled on the target element
selector string|element The container for toglit to work within.
default: body
options object Options object (see below)
enabled boolean If false
the will disable all Toglit functionality.
default: true
defaultToggleClass string The class(es) to be toggled on the target element if no data-togglit-class
is provided.
default: in
defaultTriggers string The trigger(s) to be toggled on the target element if no data-toglit-triggers
is provided.
default: in
dataToggleKey string The data
attribute on the firing element that holds the query selector.
default: toglit
dataClassKey string The data
attribute on the firing element that holds the classes to toggle.
default: toglit-class
dataTriggersKey string The data
attribute on the firing element that holds the triggers on which to toggle.
default: toglit-triggers
enable () Toglit Enables the toglit
disable () Toglit Disables the toglit
enabled () boolean returns true
if the toglit is enabled
toglitchange Fires when the class is added or removed from the target element. event.detail
carries an object containing change
(either add
or remove
) and class
, the class which was changed.
toglitadd Fires when the class is added to the target element. event.detail
carries an object containing class
, the class which was added.
toglitadd Fires when the class is removed from the target element. event.detail
carries an object containing class
, the class which was removed.
NB: If using jQuery you may need to look at event.originalEvent.detail
- The
data-toggle
attribute can be any valid CSS selector. Internally Toglit usesquerySelectorAll
to find and iterate through targets. If more than one target is found, the class will be toggled on each item individually. -
data-class
anddefaultToggleClass
can contain mutiple, space separated classes. Each will be toggled individually. - Specifiying an element in the constructor of Toglit will limit all behaviour to elements within that element.
- This package is designed to be used with webpack and babel. The
main
entry in package json points to the ES6 module in/src
. If this causes problems with your build process you can find the transpiled and bundled code in the/dist
folder.