CODEWITHSUNDEEP
jqueryhtmlcss
Arne Banck
Arne Banck

Reputation: 300

Jquery removeClass, addClass

I am having poblems with the removeClass and addClass function. I am trying to change a font awesome class when a dropdown is clicked open. I have attempted several times to make this work but I think I must be overlooking something.

Here is my html code:

<div id="cssmenu"class="col-xs-12 left">
    <ul class="nav nav-sidebar">
       <li><a href='#'><span>Dashboard</span></a></li>
       <li class='active has-sub'><a href='#'><span>Products</span><i class="fa fa-caret-right"></i>

And here is my Jquery code where I am trying to delete the class and add another one: 

$('#cssmenu ul li a i').on('click', function() {
    $('#cssmenu ul li a i').removeClass('fa-caret-right');
    $(this).addClass('fa-caret-down');
});

Thanks for having a look :) Btw I am looking for clues and not answers, since I am trying to learn Jquery.

Upvotes: 2

Views: 225

Answers (6)

Nikhil Pujari
Nikhil Pujari

Reputation: 163

Try this solution:

$('#cssmenu ul li.has-sub').on('click', function() {
  $(this).find('i').removeClass('fa-caret-right').addClass('fa-caret-down');
});

Upvotes: 0

JohnnyP
JohnnyP

Reputation: 500

As for the clues you mentioned, you may want to look into jQuery's toggleClass() method: http://api.jquery.com/toggleclass/

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

I would add the click event on the list item:

$('#cssmenu ul li').on('click', function() {
        $('#cssmenu ul li a i').removeClass('fa-caret-right');
        $(this).find('i').addClass('fa-caret-down');
});

Upvotes: 2

Ianis
Ianis

Reputation: 1175

$('#cssmenu ul li a').on('click', function() {
        $('#cssmenu ul li a i').removeClass('fa-caret-right');
        $(this).find('i').addClass('fa-caret-down');
});

Upvotes: 1

Sanchit
Sanchit

Reputation: 541

You are using click on the element <i>, which apparently you are not clicking. Try using click on the anchor <a> tag and change the class on the <i> contained in it.

Upvotes: 2

urpalreloaded
urpalreloaded

Reputation: 506

Try this

$('#cssmenu ul li a i').on('click', function() {
        $(this).addClass('fa-caret-down').siblings().removeClass('fa-caret-right');
});

Upvotes: 0

Related Questions