jQuery - Change css for all divs of a class except 'this'

Question

I need it so when I click on a div of class 'mydiv', all divs of that class have a z-index of 1, except for the div I clicked on which as a z-index of 2.

Clicking on the div again needs to change its z-index back to 1.

So far ive come up with the following:

    $('.mydiv').toggle(function() {
        $('.mydiv').css('z-index','1');
        $(this).css('z-index','2');
    }, function() {
        $(this).css('z-index','1');
    });

If you click on a div and then click on it again (returning the z-index to 1) before clicking on another one it works fine.

However if you click on a div, and then click another one without clicking the first one (to toggle it back to z-index 1), sometimes it works and sometimes it doesn't do anything. Im assuming the problem is in the first part of my code because this:

$('.mydiv').css('z-index','1');

Is not always run before this:

$(this).css('z-index','2');

Is that the problem and if so how can I fix this? Thanks

UPDATE - Sorry for not thinking of this initially, but ive simplified my question here, the actual page will need to have css positioning animations. So when you click on a div it moves with a smooth animation. I think that means I cant just change the css by toggling a class. Thanks

-

UPDATE 2 - I thought I had this working, and then I tested in IE8 and 7. IE9 is ok (along with every other browser I tested with) but IE7 and IE8 make all of the images jump around when you click on any of them. Here is the demo (all css and jQuery are within the page):

http://smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm

And here is the jQuery:

    $(".image-div").click(function () {


        var divRefTwo = $(".image-div").not(this);
        $(".image-div").not(this).animate({
                width: '250px',
                left: '0px',
                marginRight: '0px',
                backgroundPosition: '-125px'
            }, 400, function() {
                $(divRefTwo).css('z-index','1');
            });

        if ($(this).css('z-index') == 1) {
            $(this).css('z-index','2');
            $(this).animate({
                width: '500px',
                left: '-125px',
                marginRight: '-250px',
                backgroundPosition: '0px'
            }, 500, function() {
                //
            });
        }
        else {
            var divRef = this;
            $(this).animate({
                width: '250px',
                left: '0px',
                marginRight: '0px',
                backgroundPosition: '-125px'
            }, 500, function() {
                $(divRef).css('z-index','1');
            });
        }

    });

I think whats happening is this: The background image position for div.image-div starts at -125px. When you click a div.image-div, jQuery animates the background position for all the other divs of the the same class to -125px. Only divs that are expanded should change, as the other divs already have background position of -125px.

For some reason IE resets the background position to 0, and then animates to -125px. So the animation ends up in the correct place, but animates to get their when it shouldn't.

Any ideas why this is happening? Is this a jQuery IE bug or a CSS hierarchy of selectors thing? Thanks

Answer 1

So now we changed everything again. Based on the OP edit, now the code would be:

$(".mydiv").click(function () {
    var $t = $(this);
    $t.siblings().css("z-index", 1).animate({
            "margin-top": 0
        }, "fast");
    if ($t.css("z-index") == 1)
        $t.css("z-index", 2).animate({
            "margin-top": -10
        });
    else
        $t.css("z-index", 1).animate({
            "margin-top": 0
        }, "fast");
});

Here is the again updated working sample.

Now let me explain the logic of the code.

// Since we'll use $(this) (the clicked div) in many places
// of the code, I started caching it in a var named $t.
var $t = $(this);

// Then I get all the siblings (The other divs that are beside this,
// or are children of the same parent). The I change back all this divs to
// z-index = 1 and animate their top down to 0.
$t.siblings().css("z-index", 1).animate({ "margin-top": 0 }, "fast");

// Next we have the if statement to check if the clicked div is with
// z-index = 1 (unclicked) or z-index = 2 (already clicked).
if ($t.css("z-index") == 1)

// Then we change the current div to z-index = 2 and animate it 10px upper.
$t.css("z-index", 2).animate({ "margin-top": -10 });

// Or else we change back the current div to z-index = 1 and animate it down.
$t.css("z-index", 1).animate({ "margin-top": 0 });

Answer 2

I think it's the toggle part that causes extra confusion here. You can avoid it altogether like this:

$('.mydiv').click(function() {
    var current = $(this).css('z-index');
    $('.mydiv').css('z-index','1');
    $(this).css('z-index', (current == '1' ? '2' : '1'));
});