How to toggle a specific class on an element where there are multiple classes assigned?

Question

I have an element that has multiple classes. I would like to just switch between one of the classes when I click it.

<span class="icon-expand desktop-only mt8 pl4" id="toggle-site-content-width"></span>

When I click this, I need to just change icon-expand into icon-reduce, and just leave the other classes as is.

It just adds the class at the end when I'm using $(this).toggleClass('icon-reduce'). Same happens when I'm doing this: $(this).toggleClass('icon-expand','icon-reduce').

This is the full code:

$(function(){
    $('#toggle-site-content-width').click(function(){  //  on click
        $('#site-content').children('div').toggleClass('content-align-center');  //  remove this class to expand the view to full available window width
        $(this).toggleClass('toggle-expand','icon-reduce');  //  change the icon
        $(this).trigger('resize');  //  trigger the window to rearrange masonry bricks
    });
});

score 2 · Accepted Answer · answered Feb 19 '14 at 13:35

2

You need to change:

$(this).toggleClass('toggle-expand','icon-reduce');

to:

$(this).toggleClass('toggle-expand icon-reduce');

You don't need to separate your classes by , here.

answered Feb 19 '14 at 13:35

Felix

37,892
8
43
55

What the first one will do actually.? or is that a syntax error.? – Rajaprabhu Aravindasamy Feb 19 '14 at 13:39
Yes it's wrong way for toggling between two classes. – Felix Feb 19 '14 at 13:40

How to toggle a specific class on an element where there are multiple classes assigned?

1 Answers1

Linked