Question

Is it possible to make an down arrow image (class of .trigger) change to an image of an up-arrow when clicked? Basically, I’m using an image with the class of .trigger to toggle the div of .links, and when .links is revealed (slided down), I want the arrow to face up instead of down to show that users can click it again to hide .links again. Once the user hides links by clicking the UP arrow, I want it to change to the down arrow again. It’s a lot of explaining for a simple task, but hopefully you guys understand what I’m asking. The toggle code:

$(".links").hide();
    $(".trigger").click(function() {
        $(this).next(".links").slideToggle(500);
    });

Answer 1

Maybe something like this:

$(".links").hide();
    $(".trigger").click(function() {
        var BGpos = $(this).css('backgroundPosition');
        BGpos=BGpos=='0px -15px' ? '0 0' : '0px -15px';
        $(this).css('backgroundPosition', BGpos).next(".links").slideToggle(500);
    });​

FIDDLE

Or you could use classes, img elements or whatever, here’s another FIDDLE