check for hasClass to add class

Question

I have a small panel that slides out from the bottom. It has a chevron up icon. I am building a jquery snippet that bring it up (opens it) and closes it but all it must change the chevron from up to down.

The opening and closing is working and the chevron changes when it opens but it doesn't reset back to chevron up when it closes. Something is wrong in my conditional statement.

This is what I have so far

<script>
$("#openchat").click(function(){
    $("#floatingmenu").toggleClass("chatbox-open");

    if ($(this).hasClass("chatbox-open")) {
        $(this).removeClass("fa-chevron-up");
        $(this).addClass("fa-chevron-down");
    } else if (!$(this).hasClass("chatbox-open")) {
        $(this).addClass("fa-chevron-down");
        $(this).removeClass("fa-chevron-up");    
    }        
});
</script>

I am attaching a CODEPEN DEMO

BTW, my .chatbox-open class is what opens it and closes it. The other classes are simple font-awesome classes for the icons

Any help please

You don't need check if (!$(this).hasClass("chatbox-open")) simple else block is sufficeint. I would suggest you to simply use toggleClass() like $(this).toggleClass("fa-chevron-up fa-chevron-down"); — Satpal
– Satpal, Commented Feb 1, 2015 at 14:53
Is chatbox-open class on both #openchat and #floatingmenu elements? — Saravana
– Saravana, Commented Feb 1, 2015 at 14:55
It looks like you are toggling class chatbox-open for #floatingmenu and checking it for #openchat. Anyway, you have to provide mininmalistic sample code to replicate issue, e.g a jsFiddle and all relevant HTML markup in question — A. Wolff
– A. Wolff, Commented Feb 1, 2015 at 15:05
yeah, the solution in the bottom didn't work and toggling fa-chevron-up fa-chevron-down does the rick for the chevron toggle but not for the open and close because of the chatbox-open class needs to be present to toggle between open and close. I'll add a jfiddle. Give me a minute to build one quick — LOTUSMS
– LOTUSMS, Commented Feb 1, 2015 at 15:09

A. Wolff · Accepted Answer · 2015-02-01 15:27:42Z

2

Your code only ever goes into the else because #openchat never has its classes toggled elsewhere.

You can just change to this

$("#openchat").click(function () {
    $("#floatingmenu").toggleClass("chatbox-open");
    $(this).toggleClass("fa-chevron-up fa-chevron-down")
});

Live example: http://codepen.io/anon/pen/myBeEb

edited Feb 1, 2015 at 15:27

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

answered Feb 1, 2015 at 15:24

Jamiec

136k15 gold badges141 silver badges202 bronze badges

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

Comments

vbouk · Accepted Answer · 2015-02-01 14:57:28Z

actually you don't need that check because if $(this).hasClass("chatbox-open") is false it will go straight to else and execute it.

<script>
$("#openchat").click(function(){
    $("#floatingmenu").toggleClass("chatbox-open");

    if ( $(this).hasClass("chatbox-open") ){

        $(this).removeClass("fa-chevron-up");
        $(this).addClass("fa-chevron-down");

    } else {
            $(this).addClass("fa-chevron-down");
            $(this).removeClass("fa-chevron-up");    
    }        
});
</script>

just remove from else the if (!$(this).hasClass("chatbox-open"))

Collectives™ on Stack Overflow

check for hasClass to add class

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related