jQuery toggleClass() Method The toggleClass() method toggles between adding and removing one or more class names from the selected elements. This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect.
Answer. Yes, you can toggle multiple classes using a single . toggleClass() call. To do so, you can separate the class names with spaces.
JavaScript Toggle Class Multiple ElementsYou can also toggle class on multiple element at once. For this target multiple elements and use the toggle() method. To toggle a class on multiple elements select those elements and apply the toggle method on each element to handle their corresponding class.
The . class selector can also be used to select multiple classes. Note: Seperate each class with a comma. Note: Do not start a class attribute with a number.
If your element exposes class A
from the start, you can write:
$(element).toggleClass("A B");
This will remove class A
and add class B
. If you do that again, it will remove class B
and reinstate class A
.
If you want to match the elements that expose either class, you can use a multiple class selector and write:
$(".A, .B").toggleClass("A B");
Here is a simplified version: (albeit not elegant, but easy-to-follow)
$("#yourButton").toggle(function()
{
$('#target').removeClass("a").addClass("b"); //Adds 'a', removes 'b'
}, function() {
$('#target').removeClass("b").addClass("a"); //Adds 'b', removes 'a'
});
Alternatively, a similar solution:
$('#yourbutton').click(function()
{
$('#target').toggleClass('a b'); //Adds 'a', removes 'b' and vice versa
});
I've made a jQuery plugin for working DRY:
$.fn.toggle2classes = function(class1, class2){
if( !class1 || !class2 )
return this;
return this.each(function(){
var $elm = $(this);
if( $elm.hasClass(class1) || $elm.hasClass(class2) )
$elm.toggleClass(class1 +' '+ class2);
else
$elm.addClass(class1);
});
};
// usage example:
$(document.body).on('click', () => {
$(document.body).toggle2classes('a', 'b')
})
body{ height: 100vh }
.a{ background: salmon }
.b{ background: lightgreen }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Click anywhere
Your onClick
request:
<span class="A" onclick="var state = this.className.indexOf('A') > -1; $(this).toggleClass('A', !state).toggleClass('B', state);">Click Me</span>
Try it: https://jsfiddle.net/v15q6b5y/
Just the JS à la jQuery:
$('.selector').toggleClass('A', !state).toggleClass('B', state);
Here's another 'non-conventional' way.
An example of this scenario could be buttons that has the class to be switched on another element (say tabs in a container).
// 1: define the array of switching classes:
var types = ['web','email'];
// 2: get the active class:
var type = $(mybutton).prop('class');
// 3: switch the class with the other on (say..) the container. You can guess the other by using _.without() on the array:
$mycontainer.removeClass(_.without(types, type)[0]).addClass(type);
The easiest solution is to toggleClass()
both classes individually.
Let's say you have an icon:
<i id="target" class="fa fa-angle-down"></i>
To toggle between fa-angle-down
and fa-angle-up
do the following:
$('.sometrigger').click(function(){
$('#target').toggleClass('fa-angle-down');
$('#target').toggleClass('fa-angle-up');
});
Since we had fa-angle-down
at the beginning without fa-angle-up
each time you toggle both, one leaves for the other to appear.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With