Question

jQuery beginner here.

I’m working on a site with with two links. Each link slides out content a div with content below. The problem I’m having is that I can’t figure out how to toggle between both when the user clicks the other link.

So when the user clicks LINK-A it slides out CONTENT-A, while CONTENT-A is showing if the user clicks LINK-B CONTENT-A should slide back before CONTENT-B slides out.

Hope this makes sense, really hope someone can help me!

Answer 1

HTML–

<a href="#" id="link-a">Link A</a> - <a href="#" id="link-b">Link B</a>
<div id="container">
    <div id="content-a">Content A</div>
    <div id="content-b">Content B</div>
</div>

CSS–

Each content div is absolutely positioned inside of the container div so it can be animated in and out of view:

#container {
    position : relative;
    width    : 500px;
    height   : 200px;
}
#content-a {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : red;
}
#content-b {
    position   : absolute;
    top        : 0;
    left       : -100%;
    width      : 100%;
    height     : 100%;
    background : green;
}

JS–

//cache the content area selectors since they will be used multiple times
var $content_a = $('#content-a'),
    $content_b = $('#content-b');

$('#link-a').on('click', function () {

    //when the `a` link is clicked, animate `b` content off-screen
    $content_b.stop().animate({
        left : '-100%'
    }, 500, function () {

        //then animate the `a` content on-screen after the `b` content's animation completes
        $content_a.stop().animate({
            left : 0
        }, 500);
    });
});

//then do the same (but in reverse) for the `b` link
$('#link-b').on('click', function () {
    $content_a.stop().animate({
        left : '-100%'
    }, 500, function () {
        $content_b.stop().animate({
            left : 0
        }, 500);
    });
});

Here is a demo: http://jsfiddle.net/4eN84/