Monday, 3 February 2014

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"%>




Toggle Image



while running above jsp you get below output :-

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

:)