Question

Had this:

 $(function(){
        $("a.next.down").click(function() {
            $("ul.panel li").addClass("upOne");
            $("a.next").removeClass("down").addClass("downTwo");
        });
        $("a.next.downTwo").click(function() {
            $("ul.panel li").addClass("upTwo");
            $("a.next").removeClass("downTwo").addClass("downThree");
        });
    });

And wondering when I click the second event a.next.downTwo it doesn’t remove the class and add the new one.

So really is there a way to add and remove classes on each click. So click1(add class A), click2(add class B), etc.

Answer 1

My first reaction is: http://pastebin.com/LNjLzrwh.

$(function(){
    var panelLi = $("ul.panel li");

    $("a.next").click(function() {
        var self = $(this);

        if (self.hasClass("down")) {
            panelLi.addClass("upOne");
            self.removeClass("down").addClass("downTwo");
        } else if (self.hasClass("downTwo")) {
            panelLi.addClass("upTwo");
            self.removeClass("downTwo").addClass("downThree");
        }
    });
});