- Is a light-weight library, just 901 bytes minified & gzipped.
- No dependencies.
Point to the script location in your project and set the script before your main.js file and after all web content.
<script src="assets/js/ClassToggle.min.js"></script> <script src="assets/js/main.js"></script>
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
inactive on a click action.
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!
All you need to do now is just initiate the ClassToggle script with the following snippet in your main.js file:
var trigger = new Trigger(); trigger.findTrigger();
See live demo and download source code.