CODEWITHSUNDEEP
jquerytoggleclass
StudioTime
StudioTime

Reputation: 23979

toggleClass not removing first class

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

Upvotes: 1

Views: 3855

Answers (4)

GautamD31
GautamD31

Reputation: 28763

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

Upvotes: 4

Rory McCrossan
Rory McCrossan

Reputation: 337560

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');
});

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074208

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).

Upvotes: 6

VisioN
VisioN

Reputation: 145398

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

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

Upvotes: 3

Related Questions