CODEWITHSUNDEEP
jqueryhtmlcss
Kyle
Kyle

Reputation: 67194

How can I switch these two divs using jQuery?

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.

Upvotes: 0

Views: 398

Answers (7)

gilly3
gilly3

Reputation: 91467

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/

Upvotes: 2

Derek Adair
Derek Adair

Reputation: 21915

Here is a really solid tutorial on how to make the effect I believe you are after.

Basically it uses jQuery some plugins witten by Ariel Flesler and some neat CSS/JavaScript techniques. Check out the demo here. It even supports next/prev as well as loading content given url hashes.

Upvotes: 0

Rusty Jeans
Rusty Jeans

Reputation: 1426

Tell all divs to slide out when you click, then just the one you want in to slide in. Here's some jQuery:

$(".menu_ind").click(function (e) {
    $('.wrap div').animate({
        left: $(window).width()
    }, 800);
});

$('#clicker1').click(function() {
    $("#about_me").animate({
        left: '0px'
    }, 800);
});

$('#clicker2').click(function() {
    $("#about_you").animate({
        left: '0px'
    }, 800);
});

You could then tweak your css a little to hide the div that's leaving the screen so you don't see a horizontal scrollbar.

http://jsfiddle.net/jFe2p/

Upvotes: 1

Joe
Joe

Reputation: 15802

Working fiddle: http://jsfiddle.net/dyXY4/9/

$('#clicker1').click(function()
{
    if ($("#about_me").css('left') == '2000px')
    {
        $('#about_you').animate({ left: '2000px' }, function ()
        {
            $('#about_me').animate({ left: '0px' });
        });
    }
    else
    {
        $('#about_me').animate({ left: '2000px' });
    }
});

$('#clicker2').click(function()
{
    if ($("#about_you").css('left') == '2000px')
    {
        $('#about_me').animate({ left: '2000px' }, function ()
        {
            $('#about_you').animate({ left: '0px' });
        });
    }
    else
    {
        $('#about_you').animate({ left: '2000px' });
    }
});

Upvotes: 1

Joe
Joe

Reputation: 82554

How about not using toggle: http://jsfiddle.net/dyXY4/8/

$('#clicker1').click(function() {
    $("#about_me").animate({
        left: '-2000px'
    }, 800);
    $("#about_you").animate({
        left: '0'
    }, 800);
});

$('#clicker2').click(function() {
    $("#about_you").animate({
        left: '-2000px'
    }, 800);

    $("#about_me").animate({
        left: '0'
    }, 800);
});

Upvotes: 1

Ryan
Ryan

Reputation: 3171

Might you be looking for something like this:

http://lab.smashup.it/flip/

Upvotes: 1

ShaneC
ShaneC

Reputation: 2406

Add a background-color to your content divs. Otherwise they'll be transparent. You may also need to adjust your height accordingly.

Upvotes: -1

Related Questions