Question

My brain is going round in circles trying to figure this out – I think I need the help of someone with a bigger brain! Admittedly I’m a jQuery novice so I’m hoping the solution to my problem is fairly simple. I’m trying to write some code that will toggle the background image of a div (which has already been specified by a stylesheet to introduce a :hover function). The div’s that I’m affecting also function to toggle other div’s in a question/answer situation.

At present, I’ve managed to get to the stage (with the following code) that the jQuery DOES change the background image as intended (in this case, from green ‘/img/bg/nav-giclee.png’ to black ‘/img/bg/nav-down.png’);

HOWEVER what I need is for only one of the divs to be black at any one time, ie when selected. At the moment after being clicked and turning to black, the div remains black even when an alternative DIV is clicked. I suppose what I’m aiming for is for clicking on a DIV to reset the background images of the other DIVs (whilst not interfering with their show/hide question/answer features). Have I overcomplicated this explanation?!?

The working page is at: http://sketch360test.co.uk/giclee.php/… Many thanks in advance for any benevolent help…

The jquery I’m using for now is:

jQuery.fn.fadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle'}, speed, easing, callback);
};

$(function() {
    $("#answer .views-row").hide();
    $("#question .views-row").click(function(){
        var i = $(this).index();
        $("#answer .views-row").eq(i).toggle("slow").siblings().hide();
        $(".question").eq(i).css("background-image", "url(/img/bg/nav-down.png)");
    });
});

Answer 1

$(function() {
    $("#answer .views-row").hide();
    $("#question .views-row").click(function(){
        var i = $(this).index();
        $("#answer .views-row").eq(i).toggle("slow").siblings().hide();
        $(".question").css("background-image", "url(/img/bg/nav-giclee.png)").eq(i).css("background-image", "url(/img/bg/nav-down.png)");
    });
});

Also, I would recommend adding / removing a CSS class rather then setting background-image manually – you may find out than you have to modify more properties, ie. border.

UPDATE

$(".question").removeClass("selected").eq(i).addClass("selected");