toggleClass not removing first class

Question

I have the following html:

<div class="profileRowHeader">
    <i class="glyphicon glyphicon-folder-close" id="folderIcon"></i>
</div>

When .profileRowHeader is clicked I want to remove class glyphicon-folder-close and add class glyphicon-folder-open to #folderIcon

This is what I'm trying:

$('.profileRowHeader').click(function() {
    $(this).find("#folderIcon").toggleClass('glyphicon-folder-open','glyphicon-folder-close');
});

But all it does is simply add the glyphicon-folder-open class and not remove the glyphicon-folder-close class as below:

<i class="glyphicon glyphicon-folder-close glyphicon-folder-open" id="folderIcon"></i>

Is this expected behaviour? I really need to remove it if possible

Answer 1

Try like

$('.profileRowHeader').click(function() {
    $(this).find("#folderIcon").toggleClass('glyphicon-folder-open glyphicon-folder-close');
 });

For the two classes you dont need any seperator ratherthan space.See this link

Answer 2

You list the classes to toggle in one, space-delimited string:

$(this).find("#folderIcon").toggleClass('glyphicon-folder-open glyphicon-folder-close');
// Change is here --------------------------------------------^

The second (optional) argument to toggleClass isn't another class to toggle, it's a flag: If it's truthy, the toggleClass acts like addClass. If it's falsey, toggleClass acts like removeClass. If it's missing, toggleClass toggles the classes (removes them if present, adds them if absent, on a class-by-class basis).

Answer 3

In your case you should use a single string argument with classes separated by space:

$('#folderIcon', this).toggleClass('glyphicon-folder-open glyphicon-folder-close');

Answer 4

toggleClass takes a single string parameter with each class to toggle being separated by a space. Try this:

$('.profileRowHeader').click(function() {
    $(this).find("#folderIcon").toggleClass('glyphicon-folder-open glyphicon-folder-close');
});