My goal is to create a link using <a> with two different backgrounds, one displaying a "Down Arrow" and the other an "Up Arrow" based on the class names arrow-up and arrow-down.
Upon clicking the down arrow, the div named product-add-wrapper should slide down, while the down arrow transforms into an up arrow, and vice versa.
The issue I am encountering is that although the .toggle + callback function appears to be working correctly by adding and removing the desired class names, the background-image does not change (the down arrow remains as a down arrow).
Below is the provided HTML code:
<span class="arrow-right">
<a class="updown arrow-down"> </a>
</span>
Here is the corresponding CSS code:
.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 lastly, here is the accompanying JavaScript code:
$('.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');
}
});
});
If you have any insights or solutions to this problem, I would greatly appreciate your help. Thank you in advance.