This time I will share jQuery Plugin and tutorial about Toggle More Than Two CSS Classes Of An Element – toggleClasses.js, hope it will help you in programming stack.
toggleClasses.js is an extension to the jQuery .toggleClass() method that enables you to sequentially switch multiple CSS classes of an element.
How to use it:
1. Load the minified version of the toggleClasses plugin after loading jQuery JavaScript library.
2 |
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" |
3 |
crossorigin="anonymous"> |
5 |
<script src="toggleClasses.min.js"></script> |
2. Call the function on the element and define an array of CSS classes to swtich between.
1 |
<div class="foo">A</div> |
2 |
<div class="foo">B</div> |
3 |
<div class="foo">C</div> |
02 |
background-color: #C0392B; |
06 |
background-color: #3498DB; |
10 |
background-color: #16A085; |
1 |
$('.foo').on('click', e => { |
2 |
$(e.target).toggleClasses(['myClass1', 'myClass2', 'myClass3']); |
3. Decide whether to add the initial class of the element to the loop.
1 |
$('.foo').on('click', e => { |
2 |
$(e.target).toggleClasses(['myClass1', 'myClass2', 'myClass3'], true); |
This awesome jQuery plugin is developed by ThibaultJanBeyer. For more Advanced Usages, please check the demo page or visit the official website.
