I am trying to create a link <a> with two different backgrounds, one a "Down Arrow" and one an "Up Arrow" depending on the classname arrow-up and arrow-down.

So when you click on the down arrow, the div named product-add-wrapper slides down, and the down arrow* bees an **up arrow and vice versa.

The problem is, the .toggle + callback seems to work fine, it adds the desired class name and removes the desired class name, however, the background-image doesn't change (the down arrow doesn't bee an up arrow).

Here is the html.

<span class="arrow-right">
    <a class="updown arrow-down">&nbsp;</a>
</span>

Here is the css.

.updown {
    display: block;
    margin-top: -1px;
    height: 25px;
    width: 25px;
}

.arrow-up {
    background-image: url('../img/arrow-up.png');
}

.arrow-down {
    background-image: url('../img/arrow-down.png');
}

And here is the javascript.

$('.updown').click(function() {
    $('#product-add-wrapper').toggle('slow', function() {
        var classname = $('.updown').attr('class');
        if (classname === 'up arrow-down') {
            $('.updown').removeClass('arrow-down').addClass('arrow-up');
        } else {
            $('.updown').removeClass('arrow-up').addClass('arrow-down');
        }
    });
});

Any ideas? Thanks in advance.

I am trying to create a link <a> with two different backgrounds, one a "Down Arrow" and one an "Up Arrow" depending on the classname arrow-up and arrow-down.

So when you click on the down arrow, the div named product-add-wrapper slides down, and the down arrow* bees an **up arrow and vice versa.

The problem is, the .toggle + callback seems to work fine, it adds the desired class name and removes the desired class name, however, the background-image doesn't change (the down arrow doesn't bee an up arrow).

Here is the html.

<span class="arrow-right">
    <a class="updown arrow-down">&nbsp;</a>
</span>

Here is the css.

.updown {
    display: block;
    margin-top: -1px;
    height: 25px;
    width: 25px;
}

.arrow-up {
    background-image: url('../img/arrow-up.png');
}

.arrow-down {
    background-image: url('../img/arrow-down.png');
}

And here is the javascript.

$('.updown').click(function() {
    $('#product-add-wrapper').toggle('slow', function() {
        var classname = $('.updown').attr('class');
        if (classname === 'up arrow-down') {
            $('.updown').removeClass('arrow-down').addClass('arrow-up');
        } else {
            $('.updown').removeClass('arrow-up').addClass('arrow-down');
        }
    });
});

Any ideas? Thanks in advance.

• javascript
• jquery
• html
• css

• I don't see how it could be adding the proper class. This doesn't add up: $('.up') and <a class="updown arrow-down">. AKA change .up to .updown. – crush Commented Jun 14, 2013 at 17:31
• Where is element with up class? – u_mulder Commented Jun 14, 2013 at 17:33
• I've updated the javascript, please note. – fizzy drink Commented Jun 14, 2013 at 17:38
• if (classname === 'up arrow-down') { is still wrong. If that's what you have in your actual code, then the else case will always be evaluated. – crush Commented Jun 14, 2013 at 17:40
• @crush i'm not sure I understand? What I want is, the toggle to check if 'up arrow-down' is the classname, fire the .addClass + .removeClass. Else, I want it to fire the same thing just switch classes. – fizzy drink Commented Jun 14, 2013 at 17:42

5 Answers 5

The classname will never be 'up arrow-down' you probably meant 'updown arrow-down'.

if (classname === 'up arrow-down') {

This would probably be better rewritten like this:

$('.updown').click(function() {
    $('#product-add-wrapper').toggle('slow', function() {
        if ($('.updown').hasClass('arrow-down')) {
            $('.updown').removeClass('arrow-down').addClass('arrow-up');
        } else {
            $('.updown').removeClass('arrow-up').addClass('arrow-down');
        }
    });
});

Or better yet: Js:

$('.updown').click(function() {
    $('#product-add-wrapper').toggle('slow', function() {
        $('.updown').toggleClass('arrow-up');
    });
});

CSS:

.updown {
    display: block;
    margin-top: -1px;
    height: 25px;
    width: 25px;
    background-image: url('../img/arrow-down.png');
    color:green;
}

.arrow-up {
    background-image: url('../img/arrow-up.png');
    color:red;
}

HTML:

<span class="arrow-right">
    <a class="updown">&nbsp;aa</a>
</span>
<div id="product-add-wrapper">
    aa
</div>

Jsfiddle: http://jsfiddle/kingmotley/K7274/1/

Here it is using the .click() event handler instead of toggle:

$('.updown').click(function (){ 
    if ($(this).hasClass("arrow-down")){ 
        $('#product-add-wrapper').slideUp("slow");
        $(this).removeClass('arrow-down').addClass('arrow-up');
    } else { 
        $('#product-add-wrapper').slideDown("slow");
        $(this).removeClass('arrow-up').addClass('arrow-down');
    };
});

HTML as follows:

<span class="arrow-right">
    <a class="updown arrow-down">&nbsp;</a>
</span>

<div id="product-add-wrapper">
    ... DIV CONTENT ...
</div>

Working demonstration: http://jsfiddle/9wxfJ/3/

This should work, using hasClass:

    $('.updown').click(function() {
        $('#product-add-wrapper').toggle('slow', function() {
            if($('.updown').hasClass('arrow-down')) {
                $('.updown').addClass('arrow-up');
                $('.updown').removeClass('arrow-down');
            } else {
                $('.updown').addClass('arrow-down');
                $('.updown').removeClass('arrow-up');
        }
    });
});

Fiddle: http://jsfiddle/RP294/

Personally, I'd go about this using one class instead of two since you know the element you're working with has a default state. So instead of having an .arrow-down class, just give that background to the .updown class and have the .arrow-up class use !important to overrule it when toggled:

HTML

<span class="arrow-right">
    <a class="updown">&nbsp;</a>
</span>

CSS

.updown {
    display: block;
    margin-top: -1px;
    height: 25px;
    width: 25px;
    background-image: url('../img/arrow-down.png');

}

.arrow-up {
    background-image: url('../img/arrow-up.png') !important;
}

This will also shorten your javascript code quite a bit:

$('body').on('click', '.updown', function(e){
    var arrow = $(this);
    $('#product-add-wrapper').toggle('slow', function() {
      arrow.toggleClass('arrow-up');
    });
});

Work fine for me

http://jsfiddle/Hzmxc/

$('.updowns').click(function() {
    $('#product-add-wrapper .updown').toggle('slow', function() {
        if ($('.updowns').hasClass('arrow-down')) {
            $('.updowns').removeClass('arrow-down').addClass('arrow-up');
        } else {
            $('.updowns').removeClass('arrow-up').addClass('arrow-down');
        }
    });
});