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:

<script src="/path/to/Classily.min.js"></script>

Initialization

<script>
  new Classily({
    selector: ".my-classily"
  });
</script>

Usage

<button type="button"
  class="js-classily"
  data-target=".my-target"
  data-class="my-class">
  Toggle
</button>

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 of data-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

<button type="button"
  class="js-classily"
  data-target=".my-div"
  data-class="my-class">
  Toggle class
</button>

<div class="my-div">...</div>

Demo: https://codepen.io/CiTA/pen/QOmeyG/

Current element class toggling

<button type="button"
  class="js-classily"
  data-target="this"
  data-class="my-class">
  Toggle class
</button>

Demo: https://codepen.io/CiTA/pen/ooqKoR/

Toggling multiple classes on a single element

<button type="button"
  class="js-classily"
  data-target=".my-div"
  data-class="first-class second-class">
  Toggle class
</button>

<div class="my-div">...</div>

Demo: https://codepen.io/CiTA/pen/ooqKRN/

Toggling single class on multiple elements

<button type="button"
  class="js-classily"
  data-target=".my-div"
  data-class="first-class">
  Toggle class
</button>

<div class="my-div">...</div>
<div class="my-div">...</div>

Demo: https://codepen.io/CiTA/pen/MOGggq/

Toggling multiple classes on multiple elements

<button type="button"
  class="js-classily"
  data-target=".my-first-div, .my-second-div"
  data-class="first-class, second-class">
  Toggle class
</button>

<div class="my-first-div">...</div>
<div class="my-second-div">...</div>

Demo: https://codepen.io/CiTA/pen/bYMbpa/

Prevent default event

<a href="//www.google.com"
  class="js-classily"
  data-target="this"
  data-class="first-class"
  data-prevent="default">
  Toggle class
</a>

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.