Question

I know how to grayscale an image. I am using jquery accordion and I have images on every accordion header. I want to change the image to grayscale when the accordion is active and change the image back to its original form when the accordion is not active. I am using the event accordionChange. The problem is that I am not able to save the original image. Please help. Also after grayscaling I tried to give the original src directly as

document.getElementById("imgId").src = "images/pic.jpg";

This is not working.

Answer 1

If you are using jquery ui accordion here is the answer:

//please note these are global variables
var imageArr=[];
var oldIndex = false;
var oldSrc;
$(document).ready(function(){

//grab all heading images 
imageArr = $("#accordion h3 img");

$( "#accordion" ).accordion({
    change: function(event, ui) { 
        active = ui.options.active;


        //restore clicked image
        if (oldIndex!==false) {
            $(imageArr[oldIndex]).attr("src",oldSrc);
        }

        //save current index for the future
        oldIndex = active;
        //save original src for the future
        oldSrc = $(imageArr[active]).attr("src")
        //implement some logic here to choose grayscale image and set the src value 
        $(imageArr[active]).attr("src","grayscale.png");
    }
});

})