I created a plugin for toggling classes more , and I called it . The plugin is simple yet powerful, and, if used correctly, it could solve tasks that are not so simple. JavaScript classily Classily.js What is Classily.js? Classily.js is a plugin built to solve a single problem - toggle a class on an element. The current version of Classily.js has more features, including toggling multiple classes and targeting multiple elements. Javascript CSS HTML 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 tag to your document: script HTML <script src=”/path/to/Classily.min.js”></script> and then add the following code: <script>new Classily({selector: “.my-classily-element”});</script> where is a trigger selector - an element which will trigger class toggle action - usually an anchor or a button. Default selector is . selector: ".my-classily-element" .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: and data-target . data-class option is used for targeting elements. We target elements by providing selectors for function. data-target querySelectorAll() option is used to pass class names that will be toggled on targeted elements. data-class 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 is used as a selector for plugin initialization (see ); class="js-classily" How to initialize Classily.js is used to target the element or elements that will toggle class; data-target=".my-class" is used to provide a class or classes that will be toggled. data-class="blue" 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. 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 on target elements we are targeting both headings at the same time. That is because Classily.js uses function. .my-class querySelectorAll() 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. The number of comma-separated selectors must match the number of comma-separated classes. Notice that second element is toggling two different classes, and - we could provide more that one class by using space as separator. hidden blue <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. To create the same effect, think how many lines of code you should write. And now let’s look how we could achieve this effect using Classily.js: JavaScript <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 element with class. If there is no such element, Classily.js will skip this step. If the element exists, then we remove class. Repeat the same for the class. Then, we are targeting element that doesn’t contain class. If the element exists, then add class. The heading is now in “blue” state. The same is for “red” and “gold” states. .my-class .red .red .gold .my-class .blue .blue 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. 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 option. data-prevent="default" 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 , if you find any. And if you know how to make tests for this plugin, let me know how. to report an issue Originally published at www.silvestarbistrovic.from.hr . Links Github: Npm: Codepen: https://github.com/maliMirkec/Classily.js https://www.npmjs.com/package/classily.js https://codepen.io/collection/nJZLYz/ 🤘

CodePen

Facebook

Initialized

Target

Twitter

Starter Project — a set of latest best practices packed in Gulp tasks

A Guide to Static Site Generators Using Hexo and WordPress

silvestar.codes

Read My Stories

Too Long; Didn't Read

Classily.js — Toggling classes more classily

Classily.js — Toggling classes more classily

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

2018: My Technology Retrospective

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

2018: My Technology Retrospective

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps