Slide between divs

Slide between divs/pages

by mattography

HTML

<div id="left">
    <a href="#target1" class="panel">Target 1</a><br/>
    <a href="#target2" class="panel">Target 2</a><br/>
    <a href="#target3" class="panel">Target 3</a><br/>
</div>

<div id="right">
    <div class="panel" id="target1">
        <a href="#target1" class="panel">(1)</a><br/>
        <a href="#target2" class="panel">(2)</a><br/>
        <a href="#target3" class="panel">(3)</a><br/>
        <input type="text"></input><br>
        <input type="text"></input>
    </div>
    <div class="panel" id="target2" style="background:red">Target 2</div>
    <div class="panel" id="target3" style="background:yellow">Target 3</div>
</div>

CSS

#left, #right {
    position: relative;
    float: left;
    margin: 0 5px 0 0;
    border: 1px solid black;
    width: 200px;
    height: 300px;
    overflow: hidden;
}

div.panel {
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
}

JavaScript

jQuery(function($) {

    $('a.panel').click(function() {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active'),
            animIn = function () {
                $target.addClass('active').show().css({
                    left: -($target.width())
                }).animate({
                    left: 0
                }, 500);
            };
        
        if (!$target.hasClass('active') && $other.length > 0) {
            $other.each(function(index, self) {
                var $this = $(this);
                $this.removeClass('active').animate({
                    left: -$this.width()
                }, 500, animIn);
            });
        } else if (!$target.hasClass('active')) {
            animIn();
        }
    });

});