Step by step slider

HTML

<div class="container">
    <form action="#" method="post">
        <div id="fstep_1" class="box box1 selected">
            <p>THIS IS STEP 1</p>
        </div>
        <div id="fstep_2" class="box box2">
            <p>THIS IS STEP 2</p>
        </div>
        <div id="fstep_3" class=" box box3">
            <p>This is STEP 3</p>
        </div>
        <div id="fstep_4" class="box box4">
            <p>THIS IS STEP 4</p>
            <input type="submit" value="submit" />
        </div>
    </form>
    <div class="steps"> <a href="#">Next</a>
 <span class="fstep_1">1</span>
 <span class="fstep_2">2</span>
 <span class="fstep_3">3</span>
 <span class="fstep_4">4</span>

    </div>
</div>

CSS

body {
    padding: 0px;
}
.container {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 200px;
    height: 200px;
    left: 40%;
    overflow: hidden;
    cursor: pointer;
}
.container .box {
    position: absolute;
    width: 98%;
    height: 100px;
    text-align: center;
    left: 200%;
    top: 10px;
    margin-left: -50%;
    background: white;
}
#fstep_1 {
    left: 50%;
}
.steps {
    position:fixed;
    top: 150px;
}
.fstep_1 {
    color:red;
}

JavaScript

var viewed;
$('.steps a').click(function () {
    viewed = $('.selected');
    if (viewed.attr('id') != 'fstep_4') {
        viewed.removeClass('selected').animate({
            left: '150%',
        }, 400);
        viewed.next().addClass('selected').animate({
            left: '50%',
        }, 400);

    }

});
$('.steps span').click(function () {

    viewed = $('.selected');
   if (viewed.attr('id').toString() != $(this).attr('class').toString()) {
        viewed.removeClass('selected').animate({
            left: '150%'
        }, 400);
        $("#" + $(this).attr('class')).addClass('selected').animate({
            left: '50%'
        }, 400);
    }
});