Toggle image in jquery , jquery - toggle arrow

If you want to toggle between 2 images either on click show or hide content arrow up or down below is a sample to do this :-

JavaScript

Css

.trigger {
background: url(http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons-256/3d-transparent-glass-icons-arrows/006768-3d-transparent-glass-icon-arrows-arrows-up-down1.png) 0px -20px no-repeat;
    cursor: pointer;
    height: 95px;
    left: -77px;
    position: absolute;
    top: 36px;
    width: 15%;
}

Add Above css and js in imagetoggle.jsp

imagetoggle.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>







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:

while running above jsp you get below output :-

click on above image you get final output and image toggle effect :-

:)