jquery - Horizontal sliding content -

i have simple html form, 4 steps. i'd show step @ time, next button, when clicked slide content horizontally show next step.

the place i've been able find similar example on homepage of http://www.maritalaffair.co.uk/ <- join free box.

i have basic html setup, i'm not sure how best implement jquery

<form action="#" method="post">     <div id="fstep_1">         <p>this step 1</p>     </div>     <div id="fstep_2">         <p>this step 2</p>     </div>     <div id="fstep_3">         <p>this step 3</p>     </div>     <div id="fstep_4">         <p>this step 4</p>         <input type="submit" value="submit" />     </div>      <a href="#">next</a> </form>  <div class="steps">     <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> 

http://jsfiddle.net/sawam/

working demo

try this

code

  var viewed; $('.steps a').click(function () {     viewed = $('.selected');     if (viewed.attr('id') != 'fstep_4') {         $('.' + viewed.attr('id')).css('color', 'black');         viewed.removeclass('selected').animate({             left: '150%',         }, 400);         viewed.next().addclass('selected').animate({             left: '50%',         }, 400);         $('.' + viewed.next().attr('id')).css('color', 'red');     }  }); $('.steps span').click(function () {      viewed = $('.selected');    if (viewed.attr('id').tostring() != $(this).attr('class').tostring()) {         $('.' + viewed.attr('id')).css('color', 'black');         viewed.removeclass('selected').animate({             left: '150%'         }, 400);         $("#" + $(this).attr('class')).addclass('selected').animate({             left: '50%'         }, 400);         $(this).css('color', 'red');     } }); 

html

<div class="container">     <form action="#" method="post">         <div id="fstep_1" class="box box1 selected">             <p>this step 1</p>         </div>         <div id="fstep_2" class="box box2">             <p>this step 2</p>         </div>         <div id="fstep_3" class=" box box3">             <p>this step 3</p>         </div>         <div id="fstep_4" class="box box4">             <p>this 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; }