Classily.js - Toggling classes more classily

This post was originally published on silvestar.codes.

I created a JavaScript plugin for toggling classes more classily, and I called it Classily.js. The plugin is simple yet powerful, and, if used correctly, it could solve tasks that are not so simple.

What is Classily.js?

Classily.js is a Javascript plugin built to solve a single problem - toggle a CSS class on an HTML element. The current version of Classily.js has more features, including toggling multiple classes and targeting multiple elements.

Before we see the plugin in action, let's see how to install it.

How to install Classily.js?

You could install Classily.js by cloning a repository from GitHub:

git clone https://github.com/maliMirkec/Classily.js.git

or by installing using npm:

npm install classily.js

or using yarn:

yarn add classily.js

or using Bower:

bower install classily.js

How to initialize Classily.js?

To initialize Classily.js, add script tag to your HTML document:

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

and then add the following code:

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

where selector: ".my-classily-element" is a trigger selector - an element which will trigger class toggle action - usually an anchor or a button. Default selector is .js-classily.

Once you installed and initialized the plugin, you are ready to use the plugin and discover many new ways how the plugin could be helpful.

Which options does Classily.js have?

Two main options could be passed to Classily.js:

• data-target and
• data-class.

data-target option is used for targeting elements. We target elements by providing selectors for querySelectorAll() function.

data-class option is used to pass class names that will be toggled on targeted elements.

We can provide multiple targets and classes by separating them with comma character. Using these two options, and depending on how the options are passed, we could achieve four different scenarios:

• toggling a single class on a single selector,
• toggling a single class on multiple selectors,
• toggling multiple classes on a single selector and
• toggling multiple classes on multiple selectors.

When a number of selectors and classes are equal, then each selector could be toggled with a different set of classes. For example, if we pass two selectors separated with comma character and two classes separated with comma character, the first class will be toggled on elements targeted with the first selector, and the second class will be toggled on elements targeted with the second selector.

When a number of selectors and classes are not equal, then all provided classes will be toggled on every element targeted by every selector. For example, if we pass two selectors separated with comma character and three classes separated with comma character, all three classes will be toggled on every element targeted by two selectors.

Enough theory, let's see this plugin in action.

How to use Classily.js?

To trigger class toggle action, you should add the following code:

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

where

• class="js-classily" is used as a selector for plugin initialization (see How to initialize Classily.js);
• data-target=".my-class" is used to target the element or elements that will toggle class;
• data-class="blue" is used to provide a class or classes that will be toggled.

As you see, Classily.js is not complicated to use. In fact, it looks like it cannot do much, but I want to reassure you that is not the case. Stay with me; I will guide you through examples.

How to toggle the same class on multiple elements?

If you click on the "Toggle button" in the example below, you should see that both headings will change color.

https://codepen.io/CiTA/pen/POaNEj/

Here's the code:

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

By adding the same class .my-class on target elements we are targeting both headings at the same time. That is because Classily.js uses querySelectorAll() function.

There is another way how we could achieve the same effect - we could provide a comma-separated list of selectors.

How to toggle multiple classes on multiple elements?

In the example below, we are toggling two different classes on two separate elements.

https://codepen.io/CiTA/pen/VrdaGK/

The number of comma-separated selectors must match the number of comma-separated classes. Notice that second element is toggling two different classes, hidden and blue - we could provide more that one class by using space as separator.

<button type="button"
  class="js-classily"
  data-target=".my-first-target, .my-second-target"
  data-class="blue, hidden blue">
  Toggle classes
</button>
...
<h1 class="my-first-target">...</h1>
<h1 class="my-second-target">...</h1>

Pretty awesome, right. Are you ready for more advanced examples?

How to use Classily.js for toggling states?

In the following example, the heading could be in three states:

• default state,
• "blue" state,
• "red" state and
• "gold" state.

Once we activate "blue", "red" or "gold" state, the heading could never go back to default state.

https://codepen.io/CiTA/pen/pdKbzY

To create the same effect, think how many lines of JavaScript code you should write. And now let's look how we could achieve this effect using Classily.js:

<button type="button"
  class="js-classily"
  data-target=".my-class.red, .my-class.gold, .my-class:not(.blue)"
  data-class="red, gold, blue">
  Toggle Blue
</button>
...
<h1 class="my-class">...</h1>

First, we are targeting .my-class element with .red class. If there is no such element, Classily.js will skip this step. If the element exists, then we remove .red class. Repeat the same for the .gold class. Then, we are targeting .my-class element that doesn't contain .blue class. If the element exists, then add .blue class. The heading is now in "blue" state. The same is for "red" and "gold" states.

The method above could be applied to create tab section, feature seen on many websites, for example. When the user clicks on a tab, different content appears.

Does Classily.js have special features?

Often there is a need to switch the state of the element itself, like the button in this example.

https://codepen.io/CiTA/pen/JOZKEb

To avoid usage of complicated selectors, we could use the keyword this.

<a href="https://github.com/maliMirkec/Classily.js"
  class="button-switch js-classily"
  data-target="this"
  data-class="button-switch--off"
  data-prevent="default">
  ...
</a>

In this example, we used anchor tag as a button. There is another feature that is useful - we could prevent default behavior, like opening a link. To do that, we should use data-prevent="default" option.

For more Classily.js examples, check this Codepen collection.

Conclusion

Classily.js is helping me with my everyday job. I no longer have to jump from template file to script file to execute simple tasks like class toggling. And I'm able to achieve some pretty nifty tricks with it.

Share it, like it, star it, tweet it!

Also, don't hesitate to report an issue, if you find any. And if you know how to make tests for this plugin, let me know how.

Links

Github: https://github.com/maliMirkec/Classily.js
Npm: https://www.npmjs.com/package/classily.js
Codepen: https://codepen.io/collection/nJZLYz/

🤘

Comments

[Adrian B.G.]

If you use templates I can see why it can be useful.

I would say before jQuery solved this, and now we have web components or jsx, where you don't need this God patterns, where a script tells a component what's classes should have or not.