Classily.js
Toggling classes more classily.
Pure JavaScript plugin for toggling classes.
Supports multiple targets. Supports multiple classes. Supports preventing default event.
Intro
Often I find myself writing JS code for toggling classes. After more than 5 years it hit me - why don't I create a plugin that could be used for this purpose and reuse it on every project. Boing!
Now I'm able to control class toggling from HTML
directly. No more
Disclaimer
I'm no JavaScript expert, I'm sure the code could be written more effeciently.
If you think you could do better, all contribution are more than welcome.
Installation
Install using npm:
npm install classily.js
or Yarn:
yarn add classily.js
or Bower:
bower install classily.js
or clone from GitHub:
git clone https://github.com/maliMirkec/Classily.js.git
Include it in your HTML
document:
Initialization
Usage
Toggle
Options
- selector
- trigger selector
- add on an element that will trigger click event
- default '.js-classily':
class="js-classily"
data-target
- target selector
- add to target elements using
querySelectorAll
- use comma
,
to separate targets - supports multiple targets:
data-target=".first-target, .second-target"
- supports
this
to target current element:data-target="this"
data-class
- class to toggle
- supports multiple classes:
data-class="first-class second-class"
- if number of
data-target
selectors separated with comma,
matches number ofdata-class
classes separated with comma,
then each pair of selector => class will be used (see examples)
data-prevent="default"
- if provided, prevents default action (useful when setting trigger on anchors)
- must be exact match
Support
Plugin could be used in all modern browsers (See support for querySelectorAll
).
Examples
Simple class toggling
Toggle class ...
Demo: https://codepen.io/CiTA/pen/QOmeyG/
Current element class toggling
Toggle class
Demo: https://codepen.io/CiTA/pen/ooqKoR/
Toggling multiple classes on a single element
Toggle class ...
Demo: https://codepen.io/CiTA/pen/ooqKRN/
Toggling single class on multiple elements
Toggle class ......
Demo: https://codepen.io/CiTA/pen/MOGggq/
Toggling multiple classes on multiple elements
Toggle class ......
Demo: https://codepen.io/CiTA/pen/bYMbpa/
Prevent default event
Toggle class
Demo: https://codepen.io/CiTA/pen/RjyboK/
Read more about usage of Classily.js in blog article. The possibilities are endless, it's up to you how you will use this plugin.