CODEWITHSUNDEEP
javascriptjqueryhtml
Nikki Mather
Nikki Mather

Reputation: 1148

Removing active class on click issue

I have some filters on a project I'm working on that once clicked, it's given a class of active, which will then show a div inside the clicked list item called info-pane.

The filters are the 6 blue boxes. I am using the jQuery below to add and remove the active class, however the issue comes when I want to try and remove the active class by clicking the list item that has the active class state but it doesn't seem to work.

The code I'm trying; 

$(".filters > ul > li").click(function() {
    $(".filters > ul > li").removeClass("active");
    $(this).toggleClass("active");
});
$(".filters > ul > li.active").click(function() {
    $(this).removeClass("active");
});

Here's a link to the live project; http://client.n8geeks.com/

Upvotes: 0

Views: 88

Answers (2)

pr0metheus
pr0metheus

Reputation: 488

First you don't need to make two events for that click. Here is example to do in one. But i can't see where your problem is. In your live project i can see that filters change after you click..?

$(".filters > ul > li").click(function() {
        $(".filters").find('li').removeClass('active');    
        $(this).addClass("active");
    });

Edit:

I don't know if i understood correctly, but i can see when you click on 'x' nothing happens.. so function that reset your filters.

(non-tested)

$(".close").click(function(){
  $(this).closest('ul > li').find('input[type="checkbox"]').each(function( index ) {
    $(this).prop('checked', false);
  });   
});

Upvotes: 0

NiZa
NiZa

Reputation: 3926

Try this:

$(".filters > ul > li").click(function() {
    $(".filters > ul > li").not($(this).toggleClass("active")).removeClass("active");
});

Upvotes: 2

Related Questions