Question

I’m not exactly sure how to go about this. I have a feature I’m developing that is going to be using several different characteristics and only have the beginnings of it at this stage.

My goal is to have 4 different boxes stacked over each other, somewhat like a tab. I have it so that I can select one of the boxes and it comes to the front, but I’d like to be able to change the classes of the 3 remaining boxes accordingly so they stack neatly.

JavaScript:

<script>
    $(document).ready(function () {
        $('#sites div').click(function () {
            $('.topZ-index').removeClass('topZ-index');
            $(this).addClass('topZ-index');
        });
    });
</script>

HTML:

<div id="sites">
    <div id="layer1" class="layer1"></div>
    <div id="layer2" class="layer2"></div>
    <div id="layer3" class="layer3"></div>
    <div id="layer4" class="layer4"></div>
</div>

This is what I have so far, with each div having a margin-top and margin-left off centered from the one it overlaps.

I see many examples of toggling between two items, but this involves 4 different layers

I know that I’ll want to eventually use the easing and timer files as well as some other ones to slide the selected box smoothly to the front, and add a slight fading to non selected items. I’m not sure how much bearing that has at this beginning stage though.

At this point, I just need the boxes to stack correctly.

I’m aiming to visually get an effect similar to that of pulling a card out of a deck and placing it on top. It appears, that I might need to change the id as well, but I’m not sure how possible that is in jquery.

In any case using firebug, this is an example of what the html would need to look like after I selected a box.

<div id="sites">
    <div id="layer1" class="layer1"></div>
    <div id="layer4" class="layer2 topZ-index"></div>
    <div id="layer2" class="layer3"></div>
    <div id="layer3" class="layer4"></div>
</div>

Answer 1

This assumes you have classes zindex1 through zindex4, which implement the stacking order.

$(document).ready(function() {
    $('#sites div').click(function() {
        $('#sites div').removeClass('zindex1 zindex2 zindex3 zindex4');
        $(this).addClass('zindex1');
        var index = 2;
        var top = $(this).attr('id');
        $('#sites div').each(function() {
            if ($(this).attr('id') != top) {
                $(this).addClass("zindex" + index);
                index++;
            }
        });
    });
});​

See my FIDDLE