Question

I have two divs that I want to “switch” when I click each button.

The best way to show you is this example here.

I have the layout I want and the functionality almost there, but instead of one div being placed on top of the other (I’ve used position: absolute; to have them in the same “space”) I want them to “switch out” as I press the buttons.

Is this possible?

Thanks.

Answer 1

You can bind them all with one concise function, taking advantage of .index():

$('.menu_ind').click(function() {
    var n = $(".menu_ind").index(this);
    $(".about_me").not(":eq(" + n + ")").animate({
        left: '100%'
    }, 800).end().eq(n).animate({
        left: '0'
    }, 800);
});

http://jsfiddle.net/gilly3/dyXY4/12/