jQuery if class is x do something, else do something else

Question

I want to animate a div if class is equal to active, else I want tabItem to be top: 0; - The problem I have is the else doesn't seem to be firing, and I can't work out why.

The desired effect is that only one item is active at a time, and only the active has the negative top position.

For a working example please see: http://codepen.io/anon/pen/xIovs

jQuery:

 var tabItem = $(".tab--hobbit");

        function closeTab(){
            tabItem.removeClass("active");
        }

        tabItem.click(function(event) {
            event.preventDefault();

            closeTab();
            $(this).addClass("active");

            if ($(this).hasClass('active')) {
                $(this).animate({
                    top: -168
                });
            } else {
                $(tabItem).animate({
                    top: 0
                });
            }

        });

You're adding the class "active" right before the IF though, so it can never reach the else? — ConorLuddy
– ConorLuddy, Commented Mar 3, 2014 at 11:40

Arun P Johny · Accepted Answer · 2014-03-03 11:46:33Z

2

it is because you are calling addClass(), that causes the class to be added to the element if it is not there

var tabItem = $(".tab--hobbit");

tabItem.click(function (event) {
    event.preventDefault();

    tabItem.not(this).removeClass("active").animate({
        top: 0
    });
    $(this).toggleClass("active");
    $(this).animate({
        top: $(this).hasClass('active') ? -80 : 0
    });

});

Also there is a problem with the closeTab method, you should remove the active class from all elements other than the current element as shown above

edited Mar 3, 2014 at 11:46

answered Mar 3, 2014 at 11:40

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gerico Over a year ago

Oh i sort of get this, although after testing this only closes them all one you click again once it's animated up, rather than closing non-active tabs? Unless i'm applying things wrong.

Gerico Over a year ago

Oh i see, so when you click a tab to activate it, it moves up. Clicking the tab again means you reach the else part, so it closes. How would i go about making the other tabs that were open close upon clicking another tab and making that the active?

Gerico Over a year ago

Thank you Arun, not only have I learnt something. But you've helped me achieve the effect i was after. Much appreciated kind sir. Quick one though, the top: $(this).hasClass('active') ? -80 : 0 part, this is just saying, or active -80, if not, 0?

Hardy · Accepted Answer · 2014-03-03 11:40:52Z

1

You have:

$(this).addClass("active");

if ($(this).hasClass('active')) {

so of course there is always class active..

answered Mar 3, 2014 at 11:40

Hardy

5,6412 gold badges20 silver badges28 bronze badges

Comments

Thangadurai · Accepted Answer · 2014-03-03 11:57:40Z

0

I just moved your else part of the code to CloseTab. I think it is working.

    function closeTab(){
        tabItem.removeClass("active");
            $(tabItem).animate({
                top: 0
            });

    }

    tabItem.click(function(event) {
        event.preventDefault();

        closeTab();
        $(this).addClass("active");

            $(this).animate({
                top: -168
            });

    });

answered Mar 3, 2014 at 11:57

Thangadurai

2,62129 silver badges32 bronze badges

Collectives™ on Stack Overflow

jQuery if class is x do something, else do something else

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related