jQuery: Filtering divs with classes

Question

I am having trouble with this small project i'm working on (for myself... to organize the anime i've watched/haven't watched).

Here is my jQuery

    $("#all").click(function(){
        $(".anime").show(100);
    });

    $("#favorites").click(function() {
        $(".fav").show(100);
        $(".completed:not(.fav)").hide(100);
        $(".watchlist").hide(100);
    });

    $("#completed").click(function() {
        $(".completed").show(100);
        $(".fav:not(.completed)").hide(100);
        $(".watchlist").hide(100);
    });

    $("#watchlist").click(function(){
        $(".completed").hide(100);
        $(".fav").hide(100);
    }); 

I managed to filter the divs depending on the classes they had and it works great for favorites, completed and all but watchlist is buggy. If i go from favorites or completed to watch list, my watch list divs do not appear. My watch list divs appear if i click on it starting from all, and the others work if i start from watch list... so i'm not sure where i went wrong.

Answer 1

You're not executing any show() method in the watchlist click event, this is probably why nothing is showing. To fix it just replace the event with:

$("#watchlist").click(function(){
    $(".completed").hide(100);
    $(".fav").hide(100);
    $(".watchlist").show(100);
});

The way you created this will result in an exponentially large script when you're planning to add more things in the future. I would advise to generalize it a little bit.

HTML:

<a href='#' rel='anime' class='toggler'>All</a>
<a href='#' rel='fav' class='toggler'>Favorites</a>
<a href='#' rel='watchlist' class='toggler'>Watchlist</a>
<a href='#' rel='completed' class='toggler'>Completed</a>

Javascript:

$(".toggler").click(function(e) {
    e.preventDefault();
    $(".anime").hide(100);
    $("." + $(this).attr('rel')).show(100);
});

Since the show comes after the hide, you don't have to use :not() in your CSS selectors. You could create an if statement for the all button so that not everything hides before showing.