Toggle function Javascript

Question

I'm trying to make a toggle that toggles between two classes when clicked on the object with function "openclose(j)". I tried making the script only removeClass("arrow-down"), which works fine, but it wont addClass("arrow-up"). This is really annoying to deal with :)

    function openclose(j){
        if(jQuery('#div_'+j).hasClass("arrow-down")) {
            jQuery('#div_'+j).removeClass("arrow-down").addClass("arrow-up");
        }
        if (jQuery('#div_'+j).hasClass("arrow-up")) {
            jQuery('#div_'+j).removeClass("arrow-up").addClass("arrow-down");
        }

        jQuery('#collaps_'+j).toggle(
            function () {

            }
        );
    }

Any help is much appreciated,

Regards, Mathias

As a side note, you should look into using toggleClass :)

soniiic
– soniiic

2012-02-21 12:06:48 +00:00
Commented Feb 21, 2012 at 12:06 — soniiic
– soniiic, Commented Feb 21, 2012 at 12:06

Nicola Peluchetti · Accepted Answer · 2012-02-21 12:04:01Z

6

You could use toggleClass() which does what you require:

function openclose(j){
    jQuery('#div_'+j).toggleClass("arrow-down").toggleClass("arrow-up");
}

answered Feb 21, 2012 at 12:04

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

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

1 Comment

Mathias Fyrst Jakobsen Over a year ago

Great! this helps out perfectly!

musefan · Accepted Answer · 2012-02-21 12:03:17Z

3

Use an else if statement...

function openclose(j){
    if(jQuery('#div_'+j).hasClass("arrow-down")) {
        jQuery('#div_'+j).removeClass("arrow-down").addClass("arrow-up");
    }
    else if (jQuery('#div_'+j).hasClass("arrow-up")) {
        jQuery('#div_'+j).removeClass("arrow-up").addClass("arrow-down");
    }

    jQuery('#collaps_'+j).toggle(
        function () {

        }
    );
}

The problem is that you are removing the "arrow-up" class immediate after you add it!

Alternatively you could consider using the toggleClass JQuery function.

answered Feb 21, 2012 at 12:03

musefan

48.5k21 gold badges144 silver badges193 bronze badges

1 Comment

Nicola Peluchetti Over a year ago

jQuery has a toggleClass() function.

sinsedrix · Accepted Answer · 2012-02-21 12:03:48Z

1

Why not use .toggleClass() ?

jQuery('#div_'+j).toggleClass("arrow-down").toggleClass("arrow-up");

answered Feb 21, 2012 at 12:03

sinsedrix

4,8055 gold badges38 silver badges66 bronze badges

Collectives™ on Stack Overflow

Toggle function Javascript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related