A lightweight and simple class toggle in JavaScript with no dependencies.
classToggle.js
- Toggle classes with JavaScript.
- Is a light-weight library, just 1.71 KiB minified & gzipped.
- No dependencies.
classToggle.js is written to be as light and reusable as possible. For a robust code base, classToggle.js is written in Typescript and compiled to ES5 JavaScript.
Download the minified library: classToggle.js.
Point to the script location in your project and after all web content.
<body>
<!-- Your content -->
<script src="assets/js/classToggle.js"></script>
<script src="assets/js/main.js"></script>
</body>In HTML give the element that you want to function as a Trigger a data attribute:
<button data-tr="1">click me!</button>The number represent the group that it should toggle it's status.
For the Execute elements that have the same number, it will set a class active or inactive on a click action.
<div data-ex="1"></div>Match-up the number from the data-tr with that of your data-ex and it will toggle those classes.
You can have multiple numbers in a Trigger element and also in a Execute element:
<button data-tr="1 2 3 4 70"></button>
<div data-ex="1 2 3 4 70"></div>Make sure there is a whitespace between the numbers!
You're not limited by the use of numbers single words work too! So it might be easy to distinguish curtain toggle groups.
The script is self-containing so it will execute itself.
See the Changelog.