Cambie una imagen al hacer clic, pero luego cámbiela nuevamente con un segundo clic

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);
    });

preguntado el 10 de marzo de 12 a las 16:03

What's your html look like? Where is the arrow image to be found? Inside of the .trigger element, or a (next, or previous) sibling? -

You can change the "src" attribute on the <img> element any time you like ... -

what arrow? is it css image or img tag... more details needed -

2 Respuestas

Quizás algo como esto:

$(".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);
    });​

VIOLÍN

Or you could use classes, img elements or whatever, here's another VIOLÍN

respondido 10 mar '12, 16:03

Here's a simple way to flip using css:

html:

<img id="arrow" src="http://www.cksinfo.com/clipart/signssymbols/arrows/arrow-3D-green-up.png">

js:

$("#arrow").click( function() {
    $(this).toggleClass("flip-vertical");
});

CSS:

.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: flipv; /*IE*/
}

http://jsfiddle.net/DQPAx/

respondido 10 mar '12, 17:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.