What the best way, change only the registration steps and not every page

Question

I have a page where the user chooses to login (if already have registration) or register, if he chooses to register by clicking the button cadastre-se I would like the element to exit to the left and the first step of the registration to come to the right like a slide system.

In my Home html I have the steps call each one through a include and I leave one down the other following the hierarchy, do not know if for what I want this is the best option.

Like I could use display:none and applying display:block in the next element. But I would like to make the effect slide someone can give me a light and examples.

---

Follow an example in a simple way that I poderia but I want to replace it with the slide effect:

Example jsfiddle

Vlw

Answer 1

You can use CSS to do this. Using CSS Transition and negative margin hides the element. Then you add a class that resets the margin to zero, with Javascript.

CSS

#slideleft {
  width: 200px;
  height: 200px;
  transition: margin-left .5s;
  margin-left: -200px;
  background: #ccf;
}

.abrir {
  margin-left: 0px !important;
}

Javascript:

button.addEventListener('click', function() {
  slide.classList.toggle('abrir');
});

jsFiddle: http://jsfiddle.net/20b36dnv/

Answer 2

Buddy, I made an example for you. See if it helps

http://jsfiddle.net/qo7557p5/

I created html with the steps.

<div id="wizardSignin" data-step="1" active>
 <h1> Step 1 </h1>
 <input type="text">
</div>

<div id="wizardSignin" data-step="2">
 <h1> Step 2 </h1>
 <input type="checkbox">
</div>

<div id="wizardSignin" data-step="3">
 <h1> Step 3 </h1>
 <select>
   <option>Option 1</option>
 </select>
</div>

 <input type="button" id="nextButton" value="next">

In Js, display control and apply slide effect as you specified.

$(document).ready(function(){
    $('div[data-step]').hide();
  $('div[data-step=1]').show();

  $('#nextButton').on('click',function(){
        var idx  = $('#wizardSignin[active]').attr('data-step');
        $('#wizardSignin[active]').removeAttr('active').hide();

      if(idx<3){
        idx++;
      }else{
        idx=1;
      }

      $('#wizardSignin[data-step="'+idx+'"]').attr('active','');
      $('#wizardSignin[data-step="'+idx+'"]').effect('slide');


  });

});

See if this helps.